初始化项目：前端 React+TS+Tailwind+antd 脚手架，后端 Go，保留原型设计稿
This commit is contained in:
yml2213
@@ -0,0 +1,645 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="light" lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>租户管理 - 客服云 · 运营管理</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/lucide@1.7.0"></script>
|
||||
<style id="theme-vars">
|
||||
:root {
|
||||
--brand-primary: #2563eb;
|
||||
--brand-primary-hover: #1d4ed8;
|
||||
--brand-primary-active: #1e40af;
|
||||
--brand-primary-light: #dbeafe;
|
||||
--brand-primary-lighter: #eff6ff;
|
||||
--brand-primary-dark: #1e3a8a;
|
||||
--neutral-0: #ffffff;
|
||||
--neutral-50: #f8fafc;
|
||||
--neutral-100: #f1f5f9;
|
||||
--neutral-200: #e2e8f0;
|
||||
--neutral-300: #cbd5e1;
|
||||
--neutral-400: #94a3b8;
|
||||
--neutral-500: #64748b;
|
||||
--neutral-600: #475569;
|
||||
--neutral-700: #334155;
|
||||
--neutral-800: #1e293b;
|
||||
--neutral-900: #0f172a;
|
||||
--neutral-950: #020617;
|
||||
--state-success: #16a34a;
|
||||
--state-success-bg: #f0fdf4;
|
||||
--state-warning: #d97706;
|
||||
--state-warning-bg: #fffbeb;
|
||||
--state-error: #dc2626;
|
||||
--state-error-bg: #fef2f2;
|
||||
--state-info: #0891b2;
|
||||
--state-info-bg: #ecfeff;
|
||||
--font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
--font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
|
||||
--font-size-xs: 12px;
|
||||
--font-size-sm: 13px;
|
||||
--font-size-base: 14px;
|
||||
--font-size-md: 15px;
|
||||
--font-size-lg: 16px;
|
||||
--font-size-xl: 18px;
|
||||
--font-size-2xl: 20px;
|
||||
--font-size-3xl: 24px;
|
||||
--font-size-4xl: 30px;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
--line-height-tight: 1.25;
|
||||
--line-height-normal: 1.5;
|
||||
--line-height-relaxed: 1.625;
|
||||
--space-0: 0px;
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-10: 40px;
|
||||
--space-12: 48px;
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-full: 9999px;
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
|
||||
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.05);
|
||||
--shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
--transition-fast: 150ms ease;
|
||||
--transition-normal: 200ms ease;
|
||||
--transition-slow: 300ms ease;
|
||||
--sidebar-width: 240px;
|
||||
--sidebar-collapsed-width: 64px;
|
||||
--header-height: 56px;
|
||||
--panel-width: 320px;
|
||||
--chat-panel-min: 300px;
|
||||
--chat-panel-max: 600px;
|
||||
}
|
||||
.dark {
|
||||
--brand-primary: #3b82f6;
|
||||
--brand-primary-hover: #60a5fa;
|
||||
--brand-primary-active: #2563eb;
|
||||
--brand-primary-light: #1e3a5f;
|
||||
--brand-primary-lighter: #172554;
|
||||
--brand-primary-dark: #93c5fd;
|
||||
--neutral-0: #0f172a;
|
||||
--neutral-50: #1e293b;
|
||||
--neutral-100: #334155;
|
||||
--neutral-200: #475569;
|
||||
--neutral-300: #64748b;
|
||||
--neutral-400: #94a3b8;
|
||||
--neutral-500: #cbd5e1;
|
||||
--neutral-600: #e2e8f0;
|
||||
--neutral-700: #f1f5f9;
|
||||
--neutral-800: #f8fafc;
|
||||
--neutral-900: #ffffff;
|
||||
--neutral-950: #ffffff;
|
||||
--state-success-bg: #052e16;
|
||||
--state-warning-bg: #451a03;
|
||||
--state-error-bg: #450a0a;
|
||||
--state-info-bg: #083344;
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.35);
|
||||
--shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
<style type="text/tailwindcss">
|
||||
@theme inline {
|
||||
--color-primary: var(--brand-primary);
|
||||
--color-primary-hover: var(--brand-primary-hover);
|
||||
--color-primary-active: var(--brand-primary-active);
|
||||
--color-primary-light: var(--brand-primary-light);
|
||||
--color-primary-lighter: var(--brand-primary-lighter);
|
||||
--color-foreground: var(--neutral-900);
|
||||
--color-card: var(--neutral-0);
|
||||
--color-muted: var(--neutral-50);
|
||||
--color-border: var(--neutral-200);
|
||||
}
|
||||
</style>
|
||||
<style type="text/tailwindcss">
|
||||
@layer base {
|
||||
body {
|
||||
font-family: var(--font-family-base);
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-normal);
|
||||
color: var(--neutral-900);
|
||||
background-color: var(--neutral-50);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
/* Custom styles for admin tenants page */
|
||||
.drawer-open .main-content-area {
|
||||
margin-right: 480px;
|
||||
transition: margin-right var(--transition-slow);
|
||||
}
|
||||
.switch-track {
|
||||
position: relative;
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
background-color: var(--neutral-300);
|
||||
border-radius: var(--radius-full);
|
||||
cursor: pointer;
|
||||
transition: background-color var(--transition-fast);
|
||||
}
|
||||
.switch-track.active {
|
||||
background-color: var(--brand-primary);
|
||||
}
|
||||
.switch-thumb {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: var(--neutral-0);
|
||||
border-radius: var(--radius-full);
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
.switch-track.active .switch-thumb {
|
||||
transform: translateX(16px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="flex min-h-screen">
|
||||
|
||||
<!-- Left Sidebar -->
|
||||
<aside class="flex flex-col border-r" style="width: var(--sidebar-width); min-width: var(--sidebar-width); background-color: var(--neutral-0); border-color: var(--neutral-200);">
|
||||
<!-- Logo Area -->
|
||||
<div class="flex items-center justify-between px-4 py-3 border-b" style="border-color: var(--neutral-200); min-height: 52px;">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="w-7 h-7 rounded-md flex items-center justify-center shrink-0" style="background-color: var(--brand-primary);">
|
||||
<i data-lucide="headphones" class="w-4 h-4" style="color: var(--neutral-0);"></i>
|
||||
</div>
|
||||
<span class="font-semibold text-sm truncate" style="color: var(--neutral-900);">客服云 · 运营管理</span>
|
||||
</div>
|
||||
<span class="shrink-0 text-xs px-1.5 py-0.5 rounded" style="background-color: var(--brand-primary-light); color: var(--brand-primary);">管理端</span>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="flex-1 py-2">
|
||||
<div class="px-3 mb-1">
|
||||
<span class="text-xs font-medium uppercase tracking-wider" style="color: var(--neutral-400); font-size: var(--font-size-xs);">导航菜单</span>
|
||||
</div>
|
||||
<a href="#" data-dom-id="admin-nav-dashboard" class="flex items-center gap-3 mx-2 px-3 py-2 rounded-md text-sm transition-colors" style="color: var(--neutral-600);">
|
||||
<i data-lucide="layout-dashboard" class="w-4 h-4 shrink-0"></i>
|
||||
<span>运营概览</span>
|
||||
</a>
|
||||
<a href="#" data-dom-id="admin-nav-tenants" class="flex items-center gap-3 mx-2 px-3 py-2 rounded-md text-sm font-medium" style="background-color: var(--brand-primary-lighter); color: var(--brand-primary);">
|
||||
<i data-lucide="building-2" class="w-4 h-4 shrink-0"></i>
|
||||
<span>租户管理</span>
|
||||
</a>
|
||||
<a href="#" data-dom-id="admin-nav-plans" class="flex items-center gap-3 mx-2 px-3 py-2 rounded-md text-sm transition-colors" style="color: var(--neutral-600);">
|
||||
<i data-lucide="credit-card" class="w-4 h-4 shrink-0"></i>
|
||||
<span>套餐定价</span>
|
||||
</a>
|
||||
<a href="#" data-dom-id="admin-nav-ops" class="flex items-center gap-3 mx-2 px-3 py-2 rounded-md text-sm transition-colors" style="color: var(--neutral-600);">
|
||||
<i data-lucide="settings" class="w-4 h-4 shrink-0"></i>
|
||||
<span>系统运维</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<!-- Sidebar Footer -->
|
||||
<div class="px-4 py-3 border-t" style="border-color: var(--neutral-200);">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-semibold shrink-0" style="background-color: var(--brand-primary-light); color: var(--brand-primary);">管</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-sm font-medium truncate" style="color: var(--neutral-800);">系统管理员</div>
|
||||
<div class="text-xs truncate" style="color: var(--neutral-400);">admin@kefuyun.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<div class="flex-1 flex flex-col min-w-0 main-content-area">
|
||||
<!-- Top Header Bar -->
|
||||
<header class="flex items-center justify-between px-6 border-b shrink-0" style="height: var(--header-height); background-color: var(--neutral-0); border-color: var(--neutral-200);">
|
||||
<div class="flex items-center gap-3">
|
||||
<h1 class="text-base font-semibold" style="color: var(--neutral-900);">租户管理</h1>
|
||||
<span class="text-xs px-2 py-0.5 rounded" style="background-color: var(--neutral-100); color: var(--neutral-500);">共 8 个租户</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xs" style="color: var(--neutral-400);">最近更新: 2026-07-09 14:30</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Toolbar -->
|
||||
<div class="px-6 py-4 border-b shrink-0" style="background-color: var(--neutral-0); border-color: var(--neutral-200);">
|
||||
<div class="flex items-center justify-between gap-4 flex-wrap">
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Search -->
|
||||
<div class="relative">
|
||||
<i data-lucide="search" class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2" style="color: var(--neutral-400);"></i>
|
||||
<input type="text" placeholder="搜索公司名/联系人..." class="pl-9 pr-3 py-2 rounded-md border text-sm outline-none focus:ring-1" style="width: 260px; height: 32px; border-color: var(--neutral-200); background-color: var(--neutral-0); color: var(--neutral-900); --tw-ring-color: var(--brand-primary);">
|
||||
</div>
|
||||
<!-- Filters -->
|
||||
<div class="flex items-center gap-1 border rounded-md p-0.5" style="border-color: var(--neutral-200);">
|
||||
<button class="px-3 py-1 text-xs rounded font-medium" style="background-color: var(--brand-primary); color: var(--neutral-0);">全部</button>
|
||||
<button class="px-3 py-1 text-xs rounded" style="color: var(--neutral-600);">正常</button>
|
||||
<button class="px-3 py-1 text-xs rounded" style="color: var(--neutral-600);">即将到期</button>
|
||||
<button class="px-3 py-1 text-xs rounded" style="color: var(--neutral-600);">已暂停</button>
|
||||
<button class="px-3 py-1 text-xs rounded" style="color: var(--neutral-600);">已过期</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium text-white shrink-0" style="background-color: var(--brand-primary); height: 32px;">
|
||||
<i data-lucide="plus" class="w-4 h-4"></i>
|
||||
开通新账号
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table Container -->
|
||||
<div class="flex-1 overflow-auto px-6 py-4" style="background-color: var(--neutral-50);">
|
||||
<div class="border rounded-lg overflow-hidden" style="background-color: var(--neutral-0); border-color: var(--neutral-200);">
|
||||
<table class="w-full" style="table-layout: fixed;">
|
||||
<thead>
|
||||
<tr style="background-color: var(--neutral-50); border-bottom: 1px solid var(--neutral-200);">
|
||||
<th class="text-left px-4 py-3 text-xs font-semibold whitespace-nowrap" style="color: var(--neutral-500); width: 200px;">公司名称</th>
|
||||
<th class="text-left px-4 py-3 text-xs font-semibold whitespace-nowrap" style="color: var(--neutral-500); width: 90px;">联系人</th>
|
||||
<th class="text-left px-4 py-3 text-xs font-semibold whitespace-nowrap" style="color: var(--neutral-500); width: 120px;">手机号</th>
|
||||
<th class="text-left px-4 py-3 text-xs font-semibold whitespace-nowrap" style="color: var(--neutral-500); width: 90px;">套餐类型</th>
|
||||
<th class="text-center px-4 py-3 text-xs font-semibold whitespace-nowrap" style="color: var(--neutral-500); width: 80px;">坐席数量</th>
|
||||
<th class="text-left px-4 py-3 text-xs font-semibold whitespace-nowrap" style="color: var(--neutral-500); width: 100px;">开通日期</th>
|
||||
<th class="text-left px-4 py-3 text-xs font-semibold whitespace-nowrap" style="color: var(--neutral-500); width: 110px;">到期日期</th>
|
||||
<th class="text-left px-4 py-3 text-xs font-semibold whitespace-nowrap" style="color: var(--neutral-500); width: 80px;">状态</th>
|
||||
<th class="text-center px-4 py-3 text-xs font-semibold whitespace-nowrap" style="color: var(--neutral-500); width: 160px;">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Row 1: Normal -->
|
||||
<tr class="border-t" style="border-color: var(--neutral-100);">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="w-8 h-8 rounded-md flex items-center justify-center text-xs font-bold shrink-0" style="background-color: #dbeafe; color: #1d4ed8;">云</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-sm font-medium truncate" style="color: var(--neutral-900);">云端科技有限公司</div>
|
||||
<div class="text-xs truncate" style="color: var(--neutral-400);">kefu-cloud.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm truncate" style="color: var(--neutral-700);">张明远</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-600); font-family: var(--font-family-mono); font-size: var(--font-size-sm);">138****5678</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--brand-primary-light); color: var(--brand-primary);">企业版</span></td>
|
||||
<td class="px-4 py-3 text-sm text-center whitespace-nowrap" style="color: var(--neutral-700);">50</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-500);">2025-01-15</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-700);">2027-01-15</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--state-success-bg); color: var(--state-success);"><span class="w-1.5 h-1.5 rounded-full" style="background-color: var(--state-success);"></span>正常</span></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">查看</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">编辑</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">续费</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--neutral-500);">暂停</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2: Expiring Soon (soul element - warning color + icon) -->
|
||||
<tr class="border-t" style="border-color: var(--neutral-100);">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="w-8 h-8 rounded-md flex items-center justify-center text-xs font-bold shrink-0" style="background-color: #fef3c7; color: #92400e;">盛</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-sm font-medium truncate" style="color: var(--neutral-900);">盛世教育集团</div>
|
||||
<div class="text-xs truncate" style="color: var(--neutral-400);">shengshi-edu.cn</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm truncate" style="color: var(--neutral-700);">李晓琳</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-600); font-family: var(--font-family-mono); font-size: var(--font-size-sm);">139****2345</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--brand-primary-light); color: var(--brand-primary);">企业版</span></td>
|
||||
<td class="px-4 py-3 text-sm text-center whitespace-nowrap" style="color: var(--neutral-700);">30</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-500);">2025-08-10</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center gap-1 text-sm whitespace-nowrap" style="color: var(--state-warning);">
|
||||
<span style="font-size: 13px;">⏰</span>
|
||||
2026-08-10
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--state-warning-bg); color: var(--state-warning);"><span class="w-1.5 h-1.5 rounded-full" style="background-color: var(--state-warning);"></span>即将到期</span></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">查看</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">编辑</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">续费</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--neutral-500);">暂停</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3: Normal -->
|
||||
<tr class="border-t" style="border-color: var(--neutral-100);">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="w-8 h-8 rounded-md flex items-center justify-center text-xs font-bold shrink-0" style="background-color: #dbeafe; color: #1d4ed8;">鼎</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-sm font-medium truncate" style="color: var(--neutral-900);">鼎捷电子商务</div>
|
||||
<div class="text-xs truncate" style="color: var(--neutral-400);">dingjie-shop.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm truncate" style="color: var(--neutral-700);">王建华</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-600); font-family: var(--font-family-mono); font-size: var(--font-size-sm);">186****7890</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: #e0e7ff; color: #4338ca;">专业版</span></td>
|
||||
<td class="px-4 py-3 text-sm text-center whitespace-nowrap" style="color: var(--neutral-700);">15</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-500);">2026-03-01</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-700);">2027-03-01</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--state-success-bg); color: var(--state-success);"><span class="w-1.5 h-1.5 rounded-full" style="background-color: var(--state-success);"></span>正常</span></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">查看</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">编辑</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">续费</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--neutral-500);">暂停</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 4: Paused -->
|
||||
<tr class="border-t" style="border-color: var(--neutral-100);">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="w-8 h-8 rounded-md flex items-center justify-center text-xs font-bold shrink-0" style="background-color: var(--neutral-200); color: var(--neutral-500);">优</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-sm font-medium truncate" style="color: var(--neutral-900);">优享生活服务</div>
|
||||
<div class="text-xs truncate" style="color: var(--neutral-400);">youxiang-life.cn</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm truncate" style="color: var(--neutral-700);">赵雅芝</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-600); font-family: var(--font-family-mono); font-size: var(--font-size-sm);">152****4567</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--neutral-100); color: var(--neutral-600);">基础版</span></td>
|
||||
<td class="px-4 py-3 text-sm text-center whitespace-nowrap" style="color: var(--neutral-700);">5</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-500);">2025-06-20</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-700);">2026-06-20</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--neutral-100); color: var(--neutral-500);"><span class="w-1.5 h-1.5 rounded-full" style="background-color: var(--neutral-400);"></span>已暂停</span></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">查看</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">编辑</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">续费</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--neutral-500);">暂停</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 5: Normal -->
|
||||
<tr class="border-t" style="border-color: var(--neutral-100);">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="w-8 h-8 rounded-md flex items-center justify-center text-xs font-bold shrink-0" style="background-color: #fce7f3; color: #9d174d;">恒</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-sm font-medium truncate" style="color: var(--neutral-900);">恒信金融科技</div>
|
||||
<div class="text-xs truncate" style="color: var(--neutral-400);">hengxin-fin.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm truncate" style="color: var(--neutral-700);">刘志强</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-600); font-family: var(--font-family-mono); font-size: var(--font-size-sm);">177****8901</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--brand-primary-light); color: var(--brand-primary);">企业版</span></td>
|
||||
<td class="px-4 py-3 text-sm text-center whitespace-nowrap" style="color: var(--neutral-700);">100</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-500);">2024-12-01</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-700);">2026-12-01</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--state-success-bg); color: var(--state-success);"><span class="w-1.5 h-1.5 rounded-full" style="background-color: var(--state-success);"></span>正常</span></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">查看</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">编辑</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">续费</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--neutral-500);">暂停</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 6: Expired -->
|
||||
<tr class="border-t" style="border-color: var(--neutral-100);">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="w-8 h-8 rounded-md flex items-center justify-center text-xs font-bold shrink-0" style="background-color: var(--neutral-200); color: var(--neutral-500);">绿</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-sm font-medium truncate" style="color: var(--neutral-900);">绿源环保科技</div>
|
||||
<div class="text-xs truncate" style="color: var(--neutral-400);">lvyuan-tech.cn</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm truncate" style="color: var(--neutral-700);">陈海波</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-600); font-family: var(--font-family-mono); font-size: var(--font-size-sm);">135****6789</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--neutral-100); color: var(--neutral-600);">基础版</span></td>
|
||||
<td class="px-4 py-3 text-sm text-center whitespace-nowrap" style="color: var(--neutral-700);">3</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-500);">2025-02-01</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--state-error);">2026-02-01</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--state-error-bg); color: var(--state-error);"><span class="w-1.5 h-1.5 rounded-full" style="background-color: var(--state-error);"></span>已过期</span></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">查看</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">编辑</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">续费</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--neutral-500);">暂停</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 7: Expiring Soon (soul element - warning) -->
|
||||
<tr class="border-t" style="border-color: var(--neutral-100);">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="w-8 h-8 rounded-md flex items-center justify-center text-xs font-bold shrink-0" style="background-color: #e0e7ff; color: #4338ca;">星</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-sm font-medium truncate" style="color: var(--neutral-900);">星辰物流平台</div>
|
||||
<div class="text-xs truncate" style="color: var(--neutral-400);">xingchen-logi.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm truncate" style="color: var(--neutral-700);">周宇航</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-600); font-family: var(--font-family-mono); font-size: var(--font-size-sm);">158****3456</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: #e0e7ff; color: #4338ca;">专业版</span></td>
|
||||
<td class="px-4 py-3 text-sm text-center whitespace-nowrap" style="color: var(--neutral-700);">20</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-500);">2025-09-15</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center gap-1 text-sm whitespace-nowrap" style="color: var(--state-warning);">
|
||||
<span style="font-size: 13px;">⏰</span>
|
||||
2026-08-09
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--state-warning-bg); color: var(--state-warning);"><span class="w-1.5 h-1.5 rounded-full" style="background-color: var(--state-warning);"></span>即将到期</span></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">查看</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">编辑</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">续费</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--neutral-500);">暂停</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 8: Normal -->
|
||||
<tr class="border-t" style="border-color: var(--neutral-100);">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="w-8 h-8 rounded-md flex items-center justify-center text-xs font-bold shrink-0" style="background-color: #dbeafe; color: #1d4ed8;">智</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-sm font-medium truncate" style="color: var(--neutral-900);">智联人力资源</div>
|
||||
<div class="text-xs truncate" style="color: var(--neutral-400);">zhilian-hr.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm truncate" style="color: var(--neutral-700);">孙丽萍</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-600); font-family: var(--font-family-mono); font-size: var(--font-size-sm);">166****0123</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: #e0e7ff; color: #4338ca;">专业版</span></td>
|
||||
<td class="px-4 py-3 text-sm text-center whitespace-nowrap" style="color: var(--neutral-700);">10</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-500);">2026-04-01</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-700);">2027-04-01</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--state-success-bg); color: var(--state-success);"><span class="w-1.5 h-1.5 rounded-full" style="background-color: var(--state-success);"></span>正常</span></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">查看</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">编辑</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">续费</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--neutral-500);">暂停</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="flex items-center justify-between px-4 py-3 border-t" style="border-color: var(--neutral-200);">
|
||||
<span class="text-xs" style="color: var(--neutral-500);">显示 1-8 条，共 8 条记录</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<button class="px-3 py-1 text-xs rounded-md border" style="border-color: var(--neutral-200); color: var(--neutral-400); background-color: var(--neutral-0);" disabled>上一页</button>
|
||||
<button class="px-3 py-1 text-xs rounded-md font-medium text-white" style="background-color: var(--brand-primary);">1</button>
|
||||
<button class="px-3 py-1 text-xs rounded-md border" style="border-color: var(--neutral-200); color: var(--neutral-600); background-color: var(--neutral-0);" disabled>下一页</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Drawer Panel (simulated open state) -->
|
||||
<aside class="fixed top-0 right-0 h-full border-l flex flex-col" style="width: 480px; background-color: var(--neutral-0); border-color: var(--neutral-200); box-shadow: var(--shadow-floating); z-index: 40;">
|
||||
<!-- Drawer Header -->
|
||||
<div class="flex items-center justify-between px-6 py-4 border-b shrink-0" style="border-color: var(--neutral-200);">
|
||||
<h2 class="text-base font-semibold" style="color: var(--neutral-900);">开通新账号</h2>
|
||||
<button class="p-1 rounded-md hover:opacity-70" style="color: var(--neutral-400);">
|
||||
<i data-lucide="x" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Drawer Body -->
|
||||
<div class="flex-1 overflow-y-auto px-6 py-5">
|
||||
<div class="space-y-5">
|
||||
<!-- Company Name -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1.5" style="color: var(--neutral-700);">
|
||||
公司名称 <span style="color: var(--state-error);">*</span>
|
||||
</label>
|
||||
<input type="text" placeholder="请输入公司全称" class="w-full px-3 py-2 rounded-md border text-sm outline-none focus:ring-1" style="height: 32px; border-color: var(--neutral-200); background-color: var(--neutral-0); color: var(--neutral-900); --tw-ring-color: var(--brand-primary);">
|
||||
</div>
|
||||
|
||||
<!-- Contact Name -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1.5" style="color: var(--neutral-700);">联系人姓名</label>
|
||||
<input type="text" placeholder="请输入联系人姓名" class="w-full px-3 py-2 rounded-md border text-sm outline-none focus:ring-1" style="height: 32px; border-color: var(--neutral-200); background-color: var(--neutral-0); color: var(--neutral-900); --tw-ring-color: var(--brand-primary);">
|
||||
</div>
|
||||
|
||||
<!-- Phone -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1.5" style="color: var(--neutral-700);">手机号</label>
|
||||
<input type="tel" placeholder="请输入手机号码" class="w-full px-3 py-2 rounded-md border text-sm outline-none focus:ring-1" style="height: 32px; border-color: var(--neutral-200); background-color: var(--neutral-0); color: var(--neutral-900); --tw-ring-color: var(--brand-primary);">
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1.5" style="color: var(--neutral-700);">邮箱</label>
|
||||
<input type="email" placeholder="请输入邮箱地址" class="w-full px-3 py-2 rounded-md border text-sm outline-none focus:ring-1" style="height: 32px; border-color: var(--neutral-200); background-color: var(--neutral-0); color: var(--neutral-900); --tw-ring-color: var(--brand-primary);">
|
||||
</div>
|
||||
|
||||
<!-- Plan Selection -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1.5" style="color: var(--neutral-700);">选择套餐</label>
|
||||
<select class="w-full px-3 py-2 rounded-md border text-sm outline-none focus:ring-1 appearance-none" style="height: 32px; border-color: var(--neutral-200); background-color: var(--neutral-0); color: var(--neutral-900); --tw-ring-color: var(--brand-primary); background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2394a3b8%22 stroke-width=%222%22%3E%3Cpolyline points=%226 9 12 15 18 9%22/%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px;">
|
||||
<option>基础版</option>
|
||||
<option>专业版</option>
|
||||
<option>企业版</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Agent Count -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1.5" style="color: var(--neutral-700);">坐席数量</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="number" value="5" min="1" max="500" class="px-3 py-2 rounded-md border text-sm outline-none focus:ring-1" style="width: 120px; height: 32px; border-color: var(--neutral-200); background-color: var(--neutral-0); color: var(--neutral-900); --tw-ring-color: var(--brand-primary);">
|
||||
<span class="text-xs" style="color: var(--neutral-400);">基础版: 1-5 / 专业版: 1-30 / 企业版: 1-500</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Duration -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1.5" style="color: var(--neutral-700);">开通时长</label>
|
||||
<select class="w-full px-3 py-2 rounded-md border text-sm outline-none focus:ring-1 appearance-none" style="height: 32px; border-color: var(--neutral-200); background-color: var(--neutral-0); color: var(--neutral-900); --tw-ring-color: var(--brand-primary); background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2394a3b8%22 stroke-width=%222%22%3E%3Cpolyline points=%226 9 12 15 18 9%22/%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px;">
|
||||
<option>1个月</option>
|
||||
<option>3个月</option>
|
||||
<option selected>6个月</option>
|
||||
<option>12个月</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Auto Renew -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<label class="text-sm font-medium" style="color: var(--neutral-700);">自动续费</label>
|
||||
<p class="text-xs mt-0.5" style="color: var(--neutral-400);">到期前7天自动续费当前套餐</p>
|
||||
</div>
|
||||
<div class="switch-track">
|
||||
<div class="switch-thumb"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notes -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1.5" style="color: var(--neutral-700);">备注</label>
|
||||
<textarea rows="3" placeholder="可选，填写备注信息..." class="w-full px-3 py-2 rounded-md border text-sm outline-none focus:ring-1 resize-none" style="border-color: var(--neutral-200); background-color: var(--neutral-0); color: var(--neutral-900); --tw-ring-color: var(--brand-primary);"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Drawer Footer -->
|
||||
<div class="flex items-center justify-end gap-3 px-6 py-4 border-t shrink-0" style="border-color: var(--neutral-200);">
|
||||
<button class="px-4 py-2 rounded-md text-sm font-medium border" style="border-color: var(--neutral-200); color: var(--neutral-600); background-color: var(--neutral-0); height: 32px;">取消</button>
|
||||
<button class="px-4 py-2 rounded-md text-sm font-medium text-white" style="background-color: var(--brand-primary); height: 32px;">确认开通</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Drawer Overlay -->
|
||||
<div class="fixed inset-0" style="background-color: rgba(0, 0, 0, 0.2); z-index: 30;"></div>
|
||||
|
||||
</main>
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user