tanyu_admin 1.0.1

package/design-system/virtual-host-management/MASTER.md

@@ -0,0 +1,202 @@
+# Design System Master File
+
+> **LOGIC:** When building a specific page, first check `design-system/pages/[page-name].md`.
+> If that file exists, its rules **override** this Master file.
+> If not, strictly follow the rules below.
+
+---
+
+**Project:** Virtual Host Management
+**Generated:** 2026-01-24 20:36:45
+**Category:** Analytics Dashboard
+
+---
+
+## Global Rules
+
+### Color Palette
+
+| Role | Hex | CSS Variable |
+|------|-----|--------------|
+| Primary | `#7C3AED` | `--color-primary` |
+| Secondary | `#A78BFA` | `--color-secondary` |
+| CTA/Accent | `#F97316` | `--color-cta` |
+| Background | `#FAF5FF` | `--color-background` |
+| Text | `#4C1D95` | `--color-text` |
+
+**Color Notes:** Excitement purple + action orange
+
+### Typography
+
+- **Heading Font:** Fira Code
+- **Body Font:** Fira Sans
+- **Mood:** dashboard, data, analytics, code, technical, precise
+- **Google Fonts:** [Fira Code + Fira Sans](https://fonts.google.com/share?selection.family=Fira+Code:wght@400;500;600;700|Fira+Sans:wght@300;400;500;600;700)
+
+**CSS Import:**
+```css
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');
+```
+
+### Spacing Variables
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--space-xs` | `4px` / `0.25rem` | Tight gaps |
+| `--space-sm` | `8px` / `0.5rem` | Icon gaps, inline spacing |
+| `--space-md` | `16px` / `1rem` | Standard padding |
+| `--space-lg` | `24px` / `1.5rem` | Section padding |
+| `--space-xl` | `32px` / `2rem` | Large gaps |
+| `--space-2xl` | `48px` / `3rem` | Section margins |
+| `--space-3xl` | `64px` / `4rem` | Hero padding |
+
+### Shadow Depths
+
+| Level | Value | Usage |
+|-------|-------|-------|
+| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` | Subtle lift |
+| `--shadow-md` | `0 4px 6px rgba(0,0,0,0.1)` | Cards, buttons |
+| `--shadow-lg` | `0 10px 15px rgba(0,0,0,0.1)` | Modals, dropdowns |
+| `--shadow-xl` | `0 20px 25px rgba(0,0,0,0.15)` | Hero images, featured cards |
+
+---
+
+## Component Specs
+
+### Buttons
+
+```css
+/* Primary Button */
+.btn-primary {
+  background: #F97316;
+  color: white;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 600;
+  transition: all 200ms ease;
+  cursor: pointer;
+}
+
+.btn-primary:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+/* Secondary Button */
+.btn-secondary {
+  background: transparent;
+  color: #7C3AED;
+  border: 2px solid #7C3AED;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 600;
+  transition: all 200ms ease;
+  cursor: pointer;
+}
+```
+
+### Cards
+
+```css
+.card {
+  background: #FAF5FF;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: var(--shadow-md);
+  transition: all 200ms ease;
+  cursor: pointer;
+}
+
+.card:hover {
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-2px);
+}
+```
+
+### Inputs
+
+```css
+.input {
+  padding: 12px 16px;
+  border: 1px solid #E2E8F0;
+  border-radius: 8px;
+  font-size: 16px;
+  transition: border-color 200ms ease;
+}
+
+.input:focus {
+  border-color: #7C3AED;
+  outline: none;
+  box-shadow: 0 0 0 3px #7C3AED20;
+}
+```
+
+### Modals
+
+```css
+.modal-overlay {
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+}
+
+.modal {
+  background: white;
+  border-radius: 16px;
+  padding: 32px;
+  box-shadow: var(--shadow-xl);
+  max-width: 500px;
+  width: 90%;
+}
+```
+
+---
+
+## Style Guidelines
+
+**Style:** Data-Dense Dashboard
+
+**Keywords:** Multiple charts/widgets, data tables, KPI cards, minimal padding, grid layout, space-efficient, maximum data visibility
+
+**Best For:** Business intelligence dashboards, financial analytics, enterprise reporting, operational dashboards, data warehousing
+
+**Key Effects:** Hover tooltips, chart zoom on click, row highlighting on hover, smooth filter animations, data loading spinners
+
+### Page Pattern
+
+**Pattern Name:** Data-Dense + Drill-Down
+
+- **CTA Placement:** Above fold
+- **Section Order:** Hero > Features > CTA
+
+---
+
+## Anti-Patterns (Do NOT Use)
+
+- ❌ Ornate design
+- ❌ No filtering
+
+### Additional Forbidden Patterns
+
+- ❌ **Emojis as icons** — Use SVG icons (Heroicons, Lucide, Simple Icons)
+- ❌ **Missing cursor:pointer** — All clickable elements must have cursor:pointer
+- ❌ **Layout-shifting hovers** — Avoid scale transforms that shift layout
+- ❌ **Low contrast text** — Maintain 4.5:1 minimum contrast ratio
+- ❌ **Instant state changes** — Always use transitions (150-300ms)
+- ❌ **Invisible focus states** — Focus states must be visible for a11y
+
+---
+
+## Pre-Delivery Checklist
+
+Before delivering any UI code, verify:
+
+- [ ] No emojis used as icons (use SVG instead)
+- [ ] All icons from consistent icon set (Heroicons/Lucide)
+- [ ] `cursor-pointer` on all clickable elements
+- [ ] Hover states with smooth transitions (150-300ms)
+- [ ] Light mode: text contrast 4.5:1 minimum
+- [ ] Focus states visible for keyboard navigation
+- [ ] `prefers-reduced-motion` respected
+- [ ] Responsive: 375px, 768px, 1024px, 1440px
+- [ ] No content hidden behind fixed navbars
+- [ ] No horizontal scroll on mobile

package/design-system-output.md

@@ -0,0 +1,5 @@
+Traceback (most recent call last):
+  File "D:\workspace\demo\admin\.claude\skills\ui-ux-pro-max\scripts\search.py", line 76, in <module>
+    print(result)
+    ~~~~~^^^^^^^^
+UnicodeEncodeError: 'gbk' codec can't encode character '\u26a1' in position 505: illegal multibyte sequence

package/design-system-result.md

@@ -0,0 +1,50 @@
+## Design System: Virtual Host Management
+
+### Pattern
+- **Name:** Data-Dense + Drill-Down
+- **CTA Placement:** Above fold
+- **Sections:** Hero > Features > CTA
+
+### Style
+- **Name:** Data-Dense Dashboard
+- **Keywords:** Multiple charts/widgets, data tables, KPI cards, minimal padding, grid layout, space-efficient, maximum data visibility
+- **Best For:** Business intelligence dashboards, financial analytics, enterprise reporting, operational dashboards, data warehousing
+- **Performance:** ⚡ Excellent | **Accessibility:** ✓ WCAG AA
+
+### Colors
+| Role | Hex |
+|------|-----|
+| Primary | #7C3AED |
+| Secondary | #A78BFA |
+| CTA | #F97316 |
+| Background | #FAF5FF |
+| Text | #4C1D95 |
+
+*Notes: Excitement purple + action orange*
+
+### Typography
+- **Heading:** Fira Code
+- **Body:** Fira Sans
+- **Mood:** dashboard, data, analytics, code, technical, precise
+- **Best For:** Dashboards, analytics, data visualization, admin panels
+- **Google Fonts:** https://fonts.google.com/share?selection.family=Fira+Code:wght@400;500;600;700|Fira+Sans:wght@300;400;500;600;700
+- **CSS Import:**
+```css
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');
+```
+
+### Key Effects
+Hover tooltips, chart zoom on click, row highlighting on hover, smooth filter animations, data loading spinners
+
+### Avoid (Anti-patterns)
+- Ornate design
+- No filtering
+
+### Pre-Delivery Checklist
+- [ ] No emojis as icons (use SVG: Heroicons/Lucide)
+- [ ] cursor-pointer on all clickable elements
+- [ ] Hover states with smooth transitions (150-300ms)
+- [ ] Light mode: text contrast 4.5:1 minimum
+- [ ] Focus states visible for keyboard nav
+- [ ] prefers-reduced-motion respected
+- [ ] Responsive: 375px, 768px, 1024px, 1440px

package/docker-compose.yml

@@ -0,0 +1,18 @@
+version: '3.8'
+
+services:
+  admin:
+    image: ghcr.io/krystalqaq/unicom-login:latest
+    container_name: modem-admin
+    restart: unless-stopped
+    ports:
+      - "3000:3000"
+    volumes:
+      - ./virtual_hosts.json:/app/virtual_hosts.json
+      - ./.cookie_cache.json:/app/.cookie_cache.json
+      - ./.cache:/app/.cache
+    network_mode: host
+    environment:
+      - NODE_ENV=production
+    mem_limit: 128m
+    cpus: 0.5

package/index.js

@@ -0,0 +1,404 @@
+const { axios } = require('./axios-interceptor');
+const crypto = require('crypto');
+const qs = require('qs');
+const fs = require('fs');
+const path = require('path');
+const iconv = require('iconv-lite');
+
+// 配置信息
+const config = {
+    baseUrl: 'http://192.168.1.1',
+    // accountType: 'admin' | 'user'
+    accountType: 'admin',  // 管理员账户
+    password: 'Krystal1024',      // 你的密码
+    // Cookie缓存配置
+    cookieCacheFile: path.join(__dirname, '.cookie_cache.json'),
+    cookieExpireTime: 30 * 60 * 1000  // 30分钟过期
+};
+
+/**
+ * 加载缓存的cookie和session_token
+ */
+function loadCookieCache() {
+    try {
+        if (fs.existsSync(config.cookieCacheFile)) {
+            const data = fs.readFileSync(config.cookieCacheFile, 'utf8');
+            const cache = JSON.parse(data);
+            const now = Date.now();
+            // 检查是否过期
+            if (now - cache.timestamp < config.cookieExpireTime) {
+                const expireTime = Math.ceil((config.cookieExpireTime - (now - cache.timestamp)) / 1000 / 60);
+                // console.log(`使用缓存的Cookie (剩余 ${expireTime} 分钟有效期)`);
+                return {
+                    cookie: cache.cookie,
+                    sessionToken: cache.sessionToken || null
+                };
+            } else {
+                console.log('缓存的Cookie已过期');
+            }
+        }
+    } catch (error) {
+        console.log('读取Cookie缓存失败:', error.message);
+    }
+    return null;
+}
+
+/**
+ * 保存cookie和session_token到缓存
+ */
+function saveCookieCache(cookie, sessionToken = null) {
+    try {
+        const cache = {
+            cookie: cookie,
+            sessionToken: sessionToken,
+            timestamp: Date.now()
+        };
+        fs.writeFileSync(config.cookieCacheFile, JSON.stringify(cache, null, 2));
+        // console.log('Cookie和SessionToken已缓存');
+    } catch (error) {
+        console.log('保存Cookie缓存失败:', error.message);
+    }
+}
+
+/**
+ * 从HTML中提取_SESSION_TOKEN
+ * 页面格式: var session_token = "JpRX4qbNyNj3eYzdzS5VNwbR";
+ */
+function extractSessionToken(html) {
+    const match = html.match(/var\s+session_token\s*=\s*"([^"]+)"/);
+    return match ? match[1] : null;
+}
+
+/**
+ * 清除cookie缓存
+ */
+function clearCookieCache() {
+    try {
+        if (fs.existsSync(config.cookieCacheFile)) {
+            fs.unlinkSync(config.cookieCacheFile);
+            console.log('Cookie缓存已清除');
+        }
+    } catch (error) {
+        console.log('清除Cookie缓存失败:', error.message);
+    }
+}
+
+/**
+ * 从登录页面获取动态token
+ */
+async function getLoginTokens() {
+    try {
+        const response = await axios.get(`${config.baseUrl}/cu.html`, {
+            headers: {
+                'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36'
+            }
+        });
+
+        const html = response.data;
+
+        // 解析 Frm_Logintoken: document.getElementById("Frm_Logintoken").value = "20";
+        const loginTokenMatch = html.match(/getElementById\("Frm_Logintoken"\)\.value\s*=\s*"(\d+)"/);
+        const frmLogintoken = loginTokenMatch ? loginTokenMatch[1] : '20';
+
+        // 解析 Frm_Loginchecktoken: document.getElementById("Frm_Loginchecktoken").value = "JrGiWD8ZjsY0q1M7Oy9pystC";
+        const checkTokenMatch = html.match(/getElementById\("Frm_Loginchecktoken"\)\.value\s*=\s*"([^"]+)"/);
+        const frmLoginchecktoken = checkTokenMatch ? checkTokenMatch[1] : '';
+
+        // console.log('获取到的Token:');
+        console.log(`  Frm_Logintoken: ${frmLogintoken}`);
+        console.log(`  Frm_Loginchecktoken: ${frmLoginchecktoken}`);
+
+        return { frmLogintoken, frmLoginchecktoken };
+    } catch (error) {
+        console.error('获取Token失败:', error);
+        // 返回默认值
+        return { frmLogintoken: '20', frmLoginchecktoken: '' };
+    }
+}
+
+/**
+ * 生成随机数 (10000000-99999999)
+ */
+function generateRandomNum() {
+    return Math.round(Math.random() * 89999999) + 10000000;
+}
+
+/**
+ * SHA256加密: sha256(password + randomNum)
+ */
+function sha256Encrypt(password, randomNum) {
+    const text = password + randomNum;
+    return crypto.createHash('sha256').update(text).digest('hex');
+}
+
+/**
+ * 构建登录请求数据
+ */
+function buildLoginData(password, accountType = 'admin', tokens = {}) {
+    // 生成随机数
+    const userRandomNum = generateRandomNum();
+    // SHA256加密密码
+    const encryptedPassword = sha256Encrypt(password, userRandomNum);
+
+    // 管理员: Right=1, _cu_url=1
+    // 其他用户: Right=2, _cu_url=0
+    const isAdmin = accountType === 'admin';
+    // console.log({
+    //     'Frm_Logintoken': tokens.frmLogintoken || '20',
+    //     'Frm_Loginchecktoken': tokens.frmLoginchecktoken || '',
+    //     '_cu_url': isAdmin ? '1' : '0',
+    //     'Right': isAdmin ? '1' : '2',
+    //     'Username': '',
+    //     'UserRandomNum': userRandomNum.toString(),
+    //     'Password': encryptedPassword,
+    //     'action': 'login'
+    // });
+    return qs.stringify({
+        'Frm_Logintoken': tokens.frmLogintoken || '20',
+        'Frm_Loginchecktoken': tokens.frmLoginchecktoken || '',
+        '_cu_url': isAdmin ? '1' : '0',
+        'Right': isAdmin ? '1' : '2',
+        'Username': '',
+        'UserRandomNum': userRandomNum.toString(),
+        'Password': encryptedPassword,
+        'action': 'login'
+    });
+}
+
+/**
+ * 执行登录
+ */
+async function login(password, accountType = 'admin') {
+    // 先获取动态token
+    // console.log('正在获取登录token...');
+    const tokens = await getLoginTokens();
+
+    const data = buildLoginData(password, accountType, tokens);
+  
+    const requestConfig = {
+        method: 'POST',
+        url: `${config.baseUrl}/cu.html`,
+        headers: {
+            'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36',
+            'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7',
+            'Content-Type': 'application/x-www-form-urlencoded',
+            'Accept-Language': 'zh-CN,zh;q=0.9',
+            'Cache-Control': 'max-age=0',
+            'Origin': config.baseUrl,
+            'Proxy-Connection': 'keep-alive',
+            'Referer': `${config.baseUrl}/cu.html`,
+            'Upgrade-Insecure-Requests': '1',
+            'Cookie': '_TESTCOOKIESUPPORT=1'
+        },
+        data: data,
+        maxRedirects: 0,  // 不自动跟随重定向
+        validateStatus: function (status) {
+            return status >= 200 && status < 400;  // 接受所有2xx和3xx状态码
+        }
+    };
+
+    try {
+        const response = await axios.request(requestConfig);
+        // console.log('Status:', response.status);
+        // console.log('Headers:', response.headers);
+
+        // 检查是否有Set-Cookie (登录成功的标志)
+        if (response.headers['set-cookie']) {
+            console.log('Login successful! Cookies:', response.headers['set-cookie']);
+            return {
+                success: true,
+                cookies: response.headers['set-cookie'],
+                headers: response.headers
+            };
+        }
+
+        // 检查重定向
+        if (response.status === 302 || response.status === 301) {
+            const redirectUrl = response.headers['location'];
+            console.log('Redirected to:', redirectUrl);
+            return {
+                success: true,
+                redirectUrl: redirectUrl
+            };
+        }
+
+        return {
+            success: false,
+            message: 'Login response unclear',
+            data: response.data
+        };
+    } catch (error) {
+        console.error('Login error:', error.message);
+        if (error.response) {
+            console.error('Response status:', error.response.status);
+            // console.error('Response data:', error.response.data);
+        }
+        return {
+            success: false,
+            error: error.message
+        };
+    }
+}
+
+/**
+ * 从登录响应中提取会话Cookie
+ */
+function getSessionCookie(setCookieHeaders) {
+    if (!setCookieHeaders) return '';
+    // 提取所有cookie
+    const cookies = Array.isArray(setCookieHeaders)
+        ? setCookieHeaders.map(c => c.split(';')[0]).join('; ')
+        : setCookieHeaders.split(';')[0];
+    return cookies;
+}
+
+/**
+ * 获取页面（需要登录后）
+ * 自动处理中文编码问题
+ */
+async function fetchPage(path, cookies) {
+    const url = path.startsWith('http') ? path : `${config.baseUrl}/${path}`;
+    const cookieHeader = cookies || '_TESTCOOKIESUPPORT=1';
+
+    try {
+        const response = await axios.get(url, {
+            responseType: 'arraybuffer',  // 获取原始二进制数据
+            headers: {
+                'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36',
+                'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
+                'Accept-Language': 'zh-CN,zh;q=0.9',
+                'Cookie': cookieHeader,
+                'Referer': "http://192.168.1.1/getpage.gch?pid=1002&nextpage=sec_fw_alg_t.gch"
+            }
+        });
+
+        // 从响应头中获取编码
+        let encoding = 'utf8';
+        const contentType = response.headers['content-type'] || '';
+
+        // 检查 charset
+        const charsetMatch = contentType.match(/charset=([^\s;]+)/i);
+        if (charsetMatch) {
+            encoding = charsetMatch[1].toLowerCase().replace(/[^a-z0-9]/g, '');
+        }
+
+        // 常见编码别名映射
+        const encodingMap = {
+            'gb2312': 'gbk',
+            'gbk': 'gbk',
+            'gb18030': 'gbk',
+            'utf8': 'utf8',
+            'utf-8': 'utf8',
+            'iso88591': 'latin1'
+        };
+
+        const finalEncoding = encodingMap[encoding] || encoding;
+
+        // 使用 iconv 解码
+        const data = iconv.decode(Buffer.from(response.data), finalEncoding);
+        // console.log('请求'+path,data);
+        return {
+            success: true,
+            data: data,
+            status: response.status,
+            encoding: finalEncoding
+        };
+    } catch (error) {
+        return {
+            success: false,
+            error: error.message,
+            status: error.response?.status
+        };
+    }
+}
+
+// 主函数
+async function main() {
+    console.log(`=== ${config.baseUrl} ===`);
+    console.log('');
+
+    let authInfo = loadCookieCache();
+    let cookies = authInfo ? authInfo.cookie : null;
+    let sessionToken = authInfo ? authInfo.sessionToken : null;
+    let needLogin = !cookies;
+
+    if (!needLogin) {
+        // 测试缓存的cookie是否有效
+        const testResult = await fetchPage('getpage.gch?pid=1002&nextpage=sec_fw_alg_t.gch', cookies);
+        if (!testResult.success || testResult.status === 302) {
+            console.log('缓存的Cookie无效，需要重新登录');
+            needLogin = true;
+        }
+    }
+
+    if (needLogin) {
+        console.log('开始登录...');
+        const result = await login(config.password, config.accountType);
+
+        if (result.success) {
+            console.log('\nLogin successful!');
+            cookies = getSessionCookie(result.cookies);
+            console.log('Session Cookie:', cookies);
+
+            // 登录后获取页面以提取session_token
+            const pageUrl = 'getpage.gch?pid=1002&nextpage=app_virtual_conf_t.gch';
+            const pageResult = await fetchPage(pageUrl, cookies);
+            if (pageResult.success) {
+                sessionToken = extractSessionToken(pageResult.data);
+                console.log('Session Token:', sessionToken);
+            }
+
+            saveCookieCache(cookies, sessionToken);
+        } else {
+            console.log('\nLogin failed!');
+            console.log(result.message || result.error);
+            return;
+        }
+    }
+
+    // 获取目标页面
+    console.log('\n=== 获取页面 ===');
+    const pageUrl = 'getpage.gch?pid=1002&nextpage=app_virtual_conf_t.gch';
+    const pageResult = await fetchPage(pageUrl, cookies);
+
+    if (pageResult.success) {
+        console.log(`使用编码: ${pageResult.encoding}`);
+        // 如果没有sessionToken，从当前页面提取
+        if (!sessionToken) {
+            sessionToken = extractSessionToken(pageResult.data);
+            if (sessionToken) {
+                console.log('从页面提取到Session Token:', sessionToken);
+                // 更新缓存
+                const auth = loadCookieCache();
+                if (auth) {
+                    saveCookieCache(auth.cookie, sessionToken);
+                }
+            }
+        }
+        // console.log('\n页面内容:');
+        // console.log(pageResult.data);
+        //写入到本地
+        fs.writeFileSync('page.html', pageResult.data);
+        console.log('\n页面内容已写入到本地 page.html');
+    } else {
+        console.log('获取页面失败:', pageResult.error);
+    }
+}
+
+// 如果直接运行此脚本
+// if (require.main === module) {
+//     main().catch(console.error);
+// }
+
+module.exports = {
+    login,
+    fetchPage,
+    getSessionCookie,
+    loadCookieCache,
+    saveCookieCache,
+    clearCookieCache,
+    extractSessionToken,
+    buildLoginData,
+    sha256Encrypt,
+    generateRandomNum
+};