620 lines
51 KiB
HTML
620 lines
51 KiB
HTML
<!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-primary-dark: var(--brand-primary-dark);
|
|
--color-foreground: var(--neutral-900);
|
|
--color-foreground-muted: var(--neutral-500);
|
|
--color-card: var(--neutral-0);
|
|
--color-card-foreground: var(--neutral-900);
|
|
--color-muted: var(--neutral-100);
|
|
--color-muted-foreground: var(--neutral-600);
|
|
--color-border: var(--neutral-200);
|
|
--color-accent: var(--neutral-100);
|
|
--color-accent-foreground: var(--neutral-900);
|
|
--color-success: var(--state-success);
|
|
--color-success-bg: var(--state-success-bg);
|
|
--color-warning: var(--state-warning);
|
|
--color-warning-bg: var(--state-warning-bg);
|
|
--color-error: var(--state-error);
|
|
--color-error-bg: var(--state-error-bg);
|
|
--color-info: var(--state-info);
|
|
--color-info-bg: var(--state-info-bg);
|
|
--font-sans: var(--font-family-base);
|
|
--font-mono: var(--font-family-mono);
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
background-color: var(--neutral-50);
|
|
color: var(--neutral-900);
|
|
font-family: var(--font-family-base);
|
|
font-size: var(--font-size-base);
|
|
line-height: var(--line-height-normal);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="antialiased">
|
|
<main>
|
|
<!-- Top Header Bar -->
|
|
<header style="height:var(--header-height); background:var(--neutral-0); border-bottom:1px solid var(--neutral-200); position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; padding:0 var(--space-6);">
|
|
<div style="width:var(--sidebar-width); display:flex; align-items:center; gap:var(--space-3); flex-shrink:0;">
|
|
<div style="width:32px; height:32px; background:var(--brand-primary); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center;">
|
|
<i data-lucide="headset" style="width:18px; height:18px; color:#fff;"></i>
|
|
</div>
|
|
<span style="font-size:var(--font-size-lg); font-weight:var(--font-weight-semibold); color:var(--neutral-900);">在线客服</span>
|
|
</div>
|
|
<div style="flex:1; display:flex; align-items:center; justify-content:space-between; padding:0 var(--space-6);">
|
|
<div style="width:320px; height:32px; background:var(--neutral-100); border:1px solid var(--neutral-200); border-radius:var(--radius-md); display:flex; align-items:center; padding:0 var(--space-3); gap:var(--space-2);">
|
|
<i data-lucide="search" style="width:14px; height:14px; color:var(--neutral-400);"></i>
|
|
<span style="font-size:var(--font-size-sm); color:var(--neutral-400);">搜索知识条目...</span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:var(--space-4);">
|
|
<div style="position:relative;">
|
|
<i data-lucide="bell" style="width:18px; height:18px; color:var(--neutral-500);"></i>
|
|
<span style="position:absolute; top:-4px; right:-4px; width:8px; height:8px; background:var(--state-error); border-radius:var(--radius-full);"></span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:var(--space-2);">
|
|
<div style="width:28px; height:28px; background:var(--brand-primary-light); border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; font-size:var(--font-size-xs); font-weight:var(--font-weight-semibold); color:var(--brand-primary);">管</div>
|
|
<span style="font-size:var(--font-size-sm); color:var(--neutral-700);">管理员</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div style="display:flex; padding-top:var(--header-height); min-height:100vh;">
|
|
<!-- Left Sidebar Navigation (240px) -->
|
|
<nav style="width:var(--sidebar-width); background:var(--neutral-0); border-right:1px solid var(--neutral-200); position:fixed; top:var(--header-height); bottom:0; left:0; overflow-y:auto; flex-shrink:0;">
|
|
<div style="padding:var(--space-4) var(--space-3);">
|
|
<div style="display:flex; flex-direction:column; gap:var(--space-1);">
|
|
<!-- Nav: Dashboard -->
|
|
<a id="nav-dashboard" href="#" style="display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); text-decoration:none; color:var(--neutral-600); font-size:var(--font-size-sm); transition:background var(--transition-fast);">
|
|
<i data-lucide="layout-dashboard" style="width:18px; height:18px; flex-shrink:0;"></i>
|
|
<span>客服工作台</span>
|
|
</a>
|
|
<!-- Nav: Customers -->
|
|
<a id="nav-customers" href="#" style="display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); text-decoration:none; color:var(--neutral-600); font-size:var(--font-size-sm); transition:background var(--transition-fast);">
|
|
<i data-lucide="users" style="width:18px; height:18px; flex-shrink:0;"></i>
|
|
<span>客户管理</span>
|
|
</a>
|
|
<!-- Nav: History -->
|
|
<a id="nav-history" href="#" style="display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); text-decoration:none; color:var(--neutral-600); font-size:var(--font-size-sm); transition:background var(--transition-fast);">
|
|
<i data-lucide="message-square" style="width:18px; height:18px; flex-shrink:0;"></i>
|
|
<span>对话记录</span>
|
|
</a>
|
|
<!-- Nav: Knowledge (Active) -->
|
|
<a id="nav-knowledge" href="#" style="display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); text-decoration:none; background:var(--brand-primary-lighter); color:var(--brand-primary); font-size:var(--font-size-sm); font-weight:var(--font-weight-medium);">
|
|
<i data-lucide="book-open" style="width:18px; height:18px; flex-shrink:0;"></i>
|
|
<span>知识库</span>
|
|
</a>
|
|
<!-- Nav: Statistics -->
|
|
<a id="nav-statistics" href="#" style="display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); text-decoration:none; color:var(--neutral-600); font-size:var(--font-size-sm); transition:background var(--transition-fast);">
|
|
<i data-lucide="bar-chart-3" style="width:18px; height:18px; flex-shrink:0;"></i>
|
|
<span>数据统计</span>
|
|
</a>
|
|
<!-- Nav: Settings -->
|
|
<a id="nav-settings" href="#" style="display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); text-decoration:none; color:var(--neutral-600); font-size:var(--font-size-sm); transition:background var(--transition-fast);">
|
|
<i data-lucide="settings" style="width:18px; height:18px; flex-shrink:0;"></i>
|
|
<span>系统设置</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content Area -->
|
|
<div style="margin-left:var(--sidebar-width); flex:1; display:flex; min-height:calc(100vh - var(--header-height));">
|
|
<!-- Left Category Panel (280px) -->
|
|
<aside style="width:280px; background:var(--neutral-0); border-right:1px solid var(--neutral-200); flex-shrink:0; display:flex; flex-direction:column;">
|
|
<!-- Category Panel Header -->
|
|
<div style="padding:var(--space-4); border-bottom:1px solid var(--neutral-200);">
|
|
<div style="font-size:var(--font-size-md); font-weight:var(--font-weight-semibold); color:var(--neutral-900); margin-bottom:var(--space-3);">知识分类</div>
|
|
<!-- Search Box -->
|
|
<div style="height:32px; background:var(--neutral-50); border:1px solid var(--neutral-200); border-radius:var(--radius-md); display:flex; align-items:center; padding:0 var(--space-3); gap:var(--space-2);">
|
|
<i data-lucide="search" style="width:14px; height:14px; color:var(--neutral-400); flex-shrink:0;"></i>
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-400);">搜索分类...</span>
|
|
</div>
|
|
</div>
|
|
<!-- Category Tree -->
|
|
<div style="flex:1; overflow-y:auto; padding:var(--space-2) 0;">
|
|
<!-- All KB (Active) -->
|
|
<div style="display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); background:var(--brand-primary-lighter); color:var(--brand-primary); font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); cursor:pointer;">
|
|
<i data-lucide="layers" style="width:16px; height:16px; flex-shrink:0;"></i>
|
|
<span style="flex:1; truncate;">全部知识库</span>
|
|
<span style="font-size:var(--font-size-xs); background:var(--brand-primary-light); padding:1px 6px; border-radius:var(--radius-full);">128</span>
|
|
</div>
|
|
|
|
<!-- 产品常见问题 (Expanded) -->
|
|
<div style="display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); color:var(--neutral-700); font-size:var(--font-size-sm); cursor:pointer;">
|
|
<i data-lucide="chevron-down" style="width:14px; height:14px; flex-shrink:0;"></i>
|
|
<i data-lucide="package" style="width:16px; height:16px; flex-shrink:0;"></i>
|
|
<span style="flex:1; truncate;">产品常见问题</span>
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-400);">45</span>
|
|
</div>
|
|
<!-- Sub-categories -->
|
|
<div style="padding-left:var(--space-6);">
|
|
<div style="display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); color:var(--neutral-600); font-size:var(--font-size-xs); cursor:pointer;">
|
|
<i data-lucide="user-circle" style="width:14px; height:14px; flex-shrink:0;"></i>
|
|
<span style="flex:1; truncate;">账户相关</span>
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-400);">15</span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); color:var(--neutral-600); font-size:var(--font-size-xs); cursor:pointer;">
|
|
<i data-lucide="mouse-pointer-click" style="width:14px; height:14px; flex-shrink:0;"></i>
|
|
<span style="flex:1; truncate;">功能使用</span>
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-400);">20</span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); color:var(--neutral-600); font-size:var(--font-size-xs); cursor:pointer;">
|
|
<i data-lucide="credit-card" style="width:14px; height:14px; flex-shrink:0;"></i>
|
|
<span style="flex:1; truncate;">计费问题</span>
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-400);">10</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 售后服务 -->
|
|
<div style="display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); color:var(--neutral-700); font-size:var(--font-size-sm); cursor:pointer;">
|
|
<i data-lucide="chevron-right" style="width:14px; height:14px; flex-shrink:0;"></i>
|
|
<i data-lucide="shield-check" style="width:16px; height:16px; flex-shrink:0;"></i>
|
|
<span style="flex:1; truncate;">售后服务</span>
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-400);">32</span>
|
|
</div>
|
|
|
|
<!-- 技术支持 -->
|
|
<div style="display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); color:var(--neutral-700); font-size:var(--font-size-sm); cursor:pointer;">
|
|
<i data-lucide="chevron-right" style="width:14px; height:14px; flex-shrink:0;"></i>
|
|
<i data-lucide="wrench" style="width:16px; height:16px; flex-shrink:0;"></i>
|
|
<span style="flex:1; truncate;">技术支持</span>
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-400);">28</span>
|
|
</div>
|
|
|
|
<!-- 政策条款 -->
|
|
<div style="display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); color:var(--neutral-700); font-size:var(--font-size-sm); cursor:pointer;">
|
|
<i data-lucide="chevron-right" style="width:14px; height:14px; flex-shrink:0;"></i>
|
|
<i data-lucide="file-text" style="width:16px; height:16px; flex-shrink:0;"></i>
|
|
<span style="flex:1; truncate;">政策条款</span>
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-400);">15</span>
|
|
</div>
|
|
|
|
<!-- 快捷回复模板 -->
|
|
<div style="display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); color:var(--neutral-700); font-size:var(--font-size-sm); cursor:pointer;">
|
|
<i data-lucide="chevron-right" style="width:14px; height:14px; flex-shrink:0;"></i>
|
|
<i data-lucide="zap" style="width:16px; height:16px; flex-shrink:0;"></i>
|
|
<span style="flex:1; truncate;">快捷回复模板</span>
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-400);">8</span>
|
|
</div>
|
|
</div>
|
|
<!-- New Category Button -->
|
|
<div style="padding:var(--space-3) var(--space-4); border-top:1px solid var(--neutral-200);">
|
|
<button style="width:100%; height:32px; display:flex; align-items:center; justify-content:center; gap:var(--space-2); background:var(--neutral-0); border:1px solid var(--neutral-200); border-radius:var(--radius-md); color:var(--neutral-600); font-size:var(--font-size-xs); cursor:pointer; font-family:var(--font-family-base);">
|
|
<i data-lucide="folder-plus" style="width:14px; height:14px;"></i>
|
|
<span>新建分类</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Right Content List -->
|
|
<section style="flex:1; display:flex; flex-direction:column; overflow:hidden;">
|
|
<!-- Toolbar -->
|
|
<div style="padding:var(--space-4) var(--space-6); border-bottom:1px solid var(--neutral-200); display:flex; align-items:center; gap:var(--space-3); flex-shrink:0;">
|
|
<!-- Search -->
|
|
<div style="flex:1; max-width:400px; height:32px; background:var(--neutral-0); border:1px solid var(--neutral-200); border-radius:var(--radius-md); display:flex; align-items:center; padding:0 var(--space-3); gap:var(--space-2);">
|
|
<i data-lucide="search" style="width:14px; height:14px; color:var(--neutral-400); flex-shrink:0;"></i>
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-400);">搜索知识条目...</span>
|
|
</div>
|
|
<!-- Sort -->
|
|
<div style="display:flex; align-items:center; gap:var(--space-2);">
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-500); white-space:nowrap;">排序:</span>
|
|
<div style="height:32px; padding:0 var(--space-3); background:var(--neutral-0); border:1px solid var(--neutral-200); border-radius:var(--radius-md); display:flex; align-items:center; gap:var(--space-2); font-size:var(--font-size-xs); color:var(--neutral-700); cursor:pointer;">
|
|
<span>按使用次数</span>
|
|
<i data-lucide="chevron-down" style="width:12px; height:12px; color:var(--neutral-400);"></i>
|
|
</div>
|
|
</div>
|
|
<!-- Spacer -->
|
|
<div style="flex:1;"></div>
|
|
<!-- New Entry Button -->
|
|
<button style="height:32px; padding:0 var(--space-4); background:var(--brand-primary); border:none; border-radius:var(--radius-md); color:#fff; font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); cursor:pointer; display:flex; align-items:center; gap:var(--space-2); font-family:var(--font-family-base);">
|
|
<i data-lucide="plus" style="width:14px; height:14px;"></i>
|
|
<span>新建知识条目</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- List Header -->
|
|
<div style="display:flex; align-items:center; padding:var(--space-2) var(--space-6); background:var(--neutral-100); border-bottom:1px solid var(--neutral-200); font-size:var(--font-size-xs); color:var(--neutral-500); font-weight:var(--font-weight-medium); flex-shrink:0;">
|
|
<div style="width:40%; padding-left:var(--space-3);">标题</div>
|
|
<div style="width:12%; text-align:center;">分类</div>
|
|
<div style="width:10%; text-align:center;">状态</div>
|
|
<div style="width:14%; text-align:center;">使用频率</div>
|
|
<div style="width:12%; text-align:center;">更新时间</div>
|
|
<div style="width:12%; text-align:right; padding-right:var(--space-3);">操作</div>
|
|
</div>
|
|
|
|
<!-- Knowledge Entries List -->
|
|
<div style="flex:1; overflow-y:auto;">
|
|
<!-- Entry 1: High usage -->
|
|
<div style="display:flex; align-items:center; padding:var(--space-3) var(--space-6); border-bottom:1px solid var(--neutral-100); transition:background var(--transition-fast); cursor:pointer;" onmouseover="this.style.background='var(--neutral-50)'" onmouseout="this.style.background='transparent'">
|
|
<div style="width:40%; padding-left:var(--space-3); min-w-0;">
|
|
<div style="font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--neutral-900); truncate;">如何重置账户密码？</div>
|
|
<div style="font-size:var(--font-size-xs); color:var(--neutral-500); margin-top:var(--space-1); line-clamp:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">用户可以通过手机验证码或邮箱链接两种方式重置密码，如果均不可用请联系客服人工重置...</div>
|
|
</div>
|
|
<div style="width:12%; text-align:center;">
|
|
<span style="display:inline-flex; padding:1px 8px; background:var(--brand-primary-lighter); color:var(--brand-primary); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">账户相关</span>
|
|
</div>
|
|
<div style="width:10%; text-align:center;">
|
|
<span style="display:inline-flex; align-items:center; gap:var(--space-1); padding:1px 8px; background:var(--state-success-bg); color:var(--state-success); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">
|
|
<span style="width:6px; height:6px; border-radius:var(--radius-full); background:var(--state-success);"></span>
|
|
已发布
|
|
</span>
|
|
</div>
|
|
<div style="width:14%; display:flex; flex-direction:column; align-items:center; gap:var(--space-1);">
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-700); white-space:nowrap;">2,847 次</span>
|
|
<!-- Usage frequency bar (soul element) -->
|
|
<div style="width:80px; height:4px; background:var(--neutral-200); border-radius:2px; overflow:hidden;">
|
|
<div style="width:95%; height:100%; background:var(--brand-primary); border-radius:2px;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="width:12%; text-align:center;">
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-500); white-space:nowrap;">2025-07-08</span>
|
|
</div>
|
|
<div style="width:12%; display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); padding-right:var(--space-3);">
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="编辑"><i data-lucide="pencil" style="width:14px; height:14px;"></i></button>
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="复制"><i data-lucide="copy" style="width:14px; height:14px;"></i></button>
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="删除"><i data-lucide="trash-2" style="width:14px; height:14px;"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Entry 2: High usage -->
|
|
<div style="display:flex; align-items:center; padding:var(--space-3) var(--space-6); border-bottom:1px solid var(--neutral-100); transition:background var(--transition-fast); cursor:pointer;" onmouseover="this.style.background='var(--neutral-50)'" onmouseout="this.style.background='transparent'">
|
|
<div style="width:40%; padding-left:var(--space-3); min-w-0;">
|
|
<div style="font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--neutral-900); truncate;">订单退款流程说明</div>
|
|
<div style="font-size:var(--font-size-xs); color:var(--neutral-500); margin-top:var(--space-1); line-clamp:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">用户发起退款申请后，系统将在1-3个工作日内审核，审核通过后原路退回支付账户...</div>
|
|
</div>
|
|
<div style="width:12%; text-align:center;">
|
|
<span style="display:inline-flex; padding:1px 8px; background:var(--state-warning-bg); color:var(--state-warning); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">售后服务</span>
|
|
</div>
|
|
<div style="width:10%; text-align:center;">
|
|
<span style="display:inline-flex; align-items:center; gap:var(--space-1); padding:1px 8px; background:var(--state-success-bg); color:var(--state-success); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">
|
|
<span style="width:6px; height:6px; border-radius:var(--radius-full); background:var(--state-success);"></span>
|
|
已发布
|
|
</span>
|
|
</div>
|
|
<div style="width:14%; display:flex; flex-direction:column; align-items:center; gap:var(--space-1);">
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-700); white-space:nowrap;">2,156 次</span>
|
|
<div style="width:80px; height:4px; background:var(--neutral-200); border-radius:2px; overflow:hidden;">
|
|
<div style="width:78%; height:100%; background:var(--brand-primary); border-radius:2px;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="width:12%; text-align:center;">
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-500); white-space:nowrap;">2025-07-07</span>
|
|
</div>
|
|
<div style="width:12%; display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); padding-right:var(--space-3);">
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="编辑"><i data-lucide="pencil" style="width:14px; height:14px;"></i></button>
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="复制"><i data-lucide="copy" style="width:14px; height:14px;"></i></button>
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="删除"><i data-lucide="trash-2" style="width:14px; height:14px;"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Entry 3: Medium-high usage -->
|
|
<div style="display:flex; align-items:center; padding:var(--space-3) var(--space-6); border-bottom:1px solid var(--neutral-100); transition:background var(--transition-fast); cursor:pointer;" onmouseover="this.style.background='var(--neutral-50)'" onmouseout="this.style.background='transparent'">
|
|
<div style="width:40%; padding-left:var(--space-3); min-w-0;">
|
|
<div style="font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--neutral-900); truncate;">如何升级为高级会员？</div>
|
|
<div style="font-size:var(--font-size-xs); color:var(--neutral-500); margin-top:var(--space-1); line-clamp-1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">进入账户设置页面，选择会员升级选项，支持月付和年付两种方式，年付享8折优惠...</div>
|
|
</div>
|
|
<div style="width:12%; text-align:center;">
|
|
<span style="display:inline-flex; padding:1px 8px; background:var(--brand-primary-lighter); color:var(--brand-primary); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">计费问题</span>
|
|
</div>
|
|
<div style="width:10%; text-align:center;">
|
|
<span style="display:inline-flex; align-items:center; gap:var(--space-1); padding:1px 8px; background:var(--state-success-bg); color:var(--state-success); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">
|
|
<span style="width:6px; height:6px; border-radius:var(--radius-full); background:var(--state-success);"></span>
|
|
已发布
|
|
</span>
|
|
</div>
|
|
<div style="width:14%; display:flex; flex-direction:column; align-items:center; gap:var(--space-1);">
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-700); white-space:nowrap;">1,583 次</span>
|
|
<div style="width:80px; height:4px; background:var(--neutral-200); border-radius:2px; overflow:hidden;">
|
|
<div style="width:60%; height:100%; background:var(--brand-primary); border-radius:2px;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="width:12%; text-align:center;">
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-500); white-space:nowrap;">2025-07-05</span>
|
|
</div>
|
|
<div style="width:12%; display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); padding-right:var(--space-3);">
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="编辑"><i data-lucide="pencil" style="width:14px; height:14px;"></i></button>
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="复制"><i data-lucide="copy" style="width:14px; height:14px;"></i></button>
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="删除"><i data-lucide="trash-2" style="width:14px; height:14px;"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Entry 4: Medium usage -->
|
|
<div style="display:flex; align-items:center; padding:var(--space-3) var(--space-6); border-bottom:1px solid var(--neutral-100); transition:background var(--transition-fast); cursor:pointer;" onmouseover="this.style.background='var(--neutral-50)'" onmouseout="this.style.background='transparent'">
|
|
<div style="width:40%; padding-left:var(--space-3); min-w-0;">
|
|
<div style="font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--neutral-900); truncate;">系统常见报错代码对照表</div>
|
|
<div style="font-size:var(--font-size-xs); color:var(--neutral-500); margin-top:var(--space-1); line-clamp-1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">错误代码E1001表示网络超时，E1002表示认证失败，E1003表示权限不足，E2001表示数据格式错误...</div>
|
|
</div>
|
|
<div style="width:12%; text-align:center;">
|
|
<span style="display:inline-flex; padding:1px 8px; background:var(--state-info-bg); color:var(--state-info); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">技术支持</span>
|
|
</div>
|
|
<div style="width:10%; text-align:center;">
|
|
<span style="display:inline-flex; align-items:center; gap:var(--space-1); padding:1px 8px; background:var(--state-success-bg); color:var(--state-success); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">
|
|
<span style="width:6px; height:6px; border-radius:var(--radius-full); background:var(--state-success);"></span>
|
|
已发布
|
|
</span>
|
|
</div>
|
|
<div style="width:14%; display:flex; flex-direction:column; align-items:center; gap:var(--space-1);">
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-700); white-space:nowrap;">1,024 次</span>
|
|
<div style="width:80px; height:4px; background:var(--neutral-200); border-radius:2px; overflow:hidden;">
|
|
<div style="width:42%; height:100%; background:var(--brand-primary); border-radius:2px;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="width:12%; text-align:center;">
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-500); white-space:nowrap;">2025-07-03</span>
|
|
</div>
|
|
<div style="width:12%; display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); padding-right:var(--space-3);">
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="编辑"><i data-lucide="pencil" style="width:14px; height:14px;"></i></button>
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="复制"><i data-lucide="copy" style="width:14px; height:14px;"></i></button>
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="删除"><i data-lucide="trash-2" style="width:14px; height:14px;"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Entry 5: Low-medium usage -->
|
|
<div style="display:flex; align-items:center; padding:var(--space-3) var(--space-6); border-bottom:1px solid var(--neutral-100); transition:background var(--transition-fast); cursor:pointer;" onmouseover="this.style.background='var(--neutral-50)'" onmouseout="this.style.background='transparent'">
|
|
<div style="width:40%; padding-left:var(--space-3); min-w-0;">
|
|
<div style="font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--neutral-900); truncate;">隐私政策更新通知模板</div>
|
|
<div style="font-size:var(--font-size-xs); color:var(--neutral-500); margin-top:var(--space-1); line-clamp-1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">尊敬的用户，我们于2025年7月对隐私政策进行了更新，主要变更包括数据收集范围调整...</div>
|
|
</div>
|
|
<div style="width:12%; text-align:center;">
|
|
<span style="display:inline-flex; padding:1px 8px; background:var(--neutral-100); color:var(--neutral-600); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">政策条款</span>
|
|
</div>
|
|
<div style="width:10%; text-align:center;">
|
|
<span style="display:inline-flex; align-items:center; gap:var(--space-1); padding:1px 8px; background:var(--state-success-bg); color:var(--state-success); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">
|
|
<span style="width:6px; height:6px; border-radius:var(--radius-full); background:var(--state-success);"></span>
|
|
已发布
|
|
</span>
|
|
</div>
|
|
<div style="width:14%; display:flex; flex-direction:column; align-items:center; gap:var(--space-1);">
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-700); white-space:nowrap;">486 次</span>
|
|
<div style="width:80px; height:4px; background:var(--neutral-200); border-radius:2px; overflow:hidden;">
|
|
<div style="width:22%; height:100%; background:var(--neutral-400); border-radius:2px;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="width:12%; text-align:center;">
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-500); white-space:nowrap;">2025-07-01</span>
|
|
</div>
|
|
<div style="width:12%; display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); padding-right:var(--space-3);">
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="编辑"><i data-lucide="pencil" style="width:14px; height:14px;"></i></button>
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="复制"><i data-lucide="copy" style="width:14px; height:14px;"></i></button>
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="删除"><i data-lucide="trash-2" style="width:14px; height:14px;"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Entry 6: Low usage -->
|
|
<div style="display:flex; align-items:center; padding:var(--space-3) var(--space-6); border-bottom:1px solid var(--neutral-100); transition:background var(--transition-fast); cursor:pointer;" onmouseover="this.style.background='var(--neutral-50)'" onmouseout="this.style.background='transparent'">
|
|
<div style="width:40%; padding-left:var(--space-3); min-w-0;">
|
|
<div style="font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--neutral-900); truncate;">导出聊天记录功能说明</div>
|
|
<div style="font-size:var(--font-size-xs); color:var(--neutral-500); margin-top:var(--space-1); line-clamp-1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">管理员可在对话记录页面选择时间范围后点击导出按钮，支持CSV和PDF两种格式...</div>
|
|
</div>
|
|
<div style="width:12%; text-align:center;">
|
|
<span style="display:inline-flex; padding:1px 8px; background:var(--brand-primary-lighter); color:var(--brand-primary); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">功能使用</span>
|
|
</div>
|
|
<div style="width:10%; text-align:center;">
|
|
<span style="display:inline-flex; align-items:center; gap:var(--space-1); padding:1px 8px; background:var(--state-success-bg); color:var(--state-success); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">
|
|
<span style="width:6px; height:6px; border-radius:var(--radius-full); background:var(--state-success);"></span>
|
|
已发布
|
|
</span>
|
|
</div>
|
|
<div style="width:14%; display:flex; flex-direction:column; align-items:center; gap:var(--space-1);">
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-700); white-space:nowrap;">217 次</span>
|
|
<div style="width:80px; height:4px; background:var(--neutral-200); border-radius:2px; overflow:hidden;">
|
|
<div style="width:12%; height:100%; background:var(--neutral-400); border-radius:2px;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="width:12%; text-align:center;">
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-500); white-space:nowrap;">2025-06-28</span>
|
|
</div>
|
|
<div style="width:12%; display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); padding-right:var(--space-3);">
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="编辑"><i data-lucide="pencil" style="width:14px; height:14px;"></i></button>
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="复制"><i data-lucide="copy" style="width:14px; height:14px;"></i></button>
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="删除"><i data-lucide="trash-2" style="width:14px; height:14px;"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Entry 7: Draft -->
|
|
<div style="display:flex; align-items:center; padding:var(--space-3) var(--space-6); border-bottom:1px solid var(--neutral-100); transition:background var(--transition-fast); cursor:pointer;" onmouseover="this.style.background='var(--neutral-50)'" onmouseout="this.style.background='transparent'">
|
|
<div style="width:40%; padding-left:var(--space-3); min-w-0;">
|
|
<div style="font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--neutral-900); truncate;">产品新功能发布标准话术</div>
|
|
<div style="font-size:var(--font-size-xs); color:var(--neutral-500); margin-top:var(--space-1); line-clamp-1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">当用户咨询新功能相关信息时，使用以下话术模板回复，包含功能亮点、使用方式和常见疑问...</div>
|
|
</div>
|
|
<div style="width:12%; text-align:center;">
|
|
<span style="display:inline-flex; padding:1px 8px; background:var(--neutral-100); color:var(--neutral-500); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">快捷回复</span>
|
|
</div>
|
|
<div style="width:10%; text-align:center;">
|
|
<span style="display:inline-flex; align-items:center; gap:var(--space-1); padding:1px 8px; background:var(--neutral-100); color:var(--neutral-500); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">
|
|
<span style="width:6px; height:6px; border-radius:var(--radius-full); background:var(--neutral-400);"></span>
|
|
草稿
|
|
</span>
|
|
</div>
|
|
<div style="width:14%; display:flex; flex-direction:column; align-items:center; gap:var(--space-1);">
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-400); white-space:nowrap;">0 次</span>
|
|
<div style="width:80px; height:4px; background:var(--neutral-200); border-radius:2px; overflow:hidden;">
|
|
<div style="width:0%; height:100%; background:var(--neutral-300); border-radius:2px;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="width:12%; text-align:center;">
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-500); white-space:nowrap;">2025-07-09</span>
|
|
</div>
|
|
<div style="width:12%; display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); padding-right:var(--space-3);">
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="编辑"><i data-lucide="pencil" style="width:14px; height:14px;"></i></button>
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="复制"><i data-lucide="copy" style="width:14px; height:14px;"></i></button>
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="删除"><i data-lucide="trash-2" style="width:14px; height:14px;"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Entry 8: Low usage -->
|
|
<div style="display:flex; align-items:center; padding:var(--space-3) var(--space-6); border-bottom:1px solid var(--neutral-100); transition:background var(--transition-fast); cursor:pointer;" onmouseover="this.style.background='var(--neutral-50)'" onmouseout="this.style.background='transparent'">
|
|
<div style="width:40%; padding-left:var(--space-3); min-w-0;">
|
|
<div style="font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--neutral-900); truncate;">API接口调用频率限制说明</div>
|
|
<div style="font-size:var(--font-size-xs); color:var(--neutral-500); margin-top:var(--space-1); line-clamp-1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">标准版用户API调用频率限制为每分钟60次，专业版为每分钟300次，企业版可定制...</div>
|
|
</div>
|
|
<div style="width:12%; text-align:center;">
|
|
<span style="display:inline-flex; padding:1px 8px; background:var(--state-info-bg); color:var(--state-info); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">技术支持</span>
|
|
</div>
|
|
<div style="width:10%; text-align:center;">
|
|
<span style="display:inline-flex; align-items:center; gap:var(--space-1); padding:1px 8px; background:var(--state-success-bg); color:var(--state-success); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">
|
|
<span style="width:6px; height:6px; border-radius:var(--radius-full); background:var(--state-success);"></span>
|
|
已发布
|
|
</span>
|
|
</div>
|
|
<div style="width:14%; display:flex; flex-direction:column; align-items:center; gap:var(--space-1);">
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-700); white-space:nowrap;">93 次</span>
|
|
<div style="width:80px; height:4px; background:var(--neutral-200); border-radius:2px; overflow:hidden;">
|
|
<div style="width:6%; height:100%; background:var(--neutral-400); border-radius:2px;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="width:12%; text-align:center;">
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-500); white-space:nowrap;">2025-06-20</span>
|
|
</div>
|
|
<div style="width:12%; display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); padding-right:var(--space-3);">
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="编辑"><i data-lucide="pencil" style="width:14px; height:14px;"></i></button>
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="复制"><i data-lucide="copy" style="width:14px; height:14px;"></i></button>
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="删除"><i data-lucide="trash-2" style="width:14px; height:14px;"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div style="padding:var(--space-3) var(--space-6); border-top:1px solid var(--neutral-200); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; background:var(--neutral-0);">
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-500);">共 128 条，当前第 1/13 页</span>
|
|
<div style="display:flex; align-items:center; gap:var(--space-1);">
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--neutral-200); background:var(--neutral-0); border-radius:var(--radius-md); color:var(--neutral-400); cursor:pointer; font-family:var(--font-family-base);">
|
|
<i data-lucide="chevron-left" style="width:14px; height:14px;"></i>
|
|
</button>
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--brand-primary); background:var(--brand-primary); border-radius:var(--radius-md); color:#fff; font-size:var(--font-size-xs); font-weight:var(--font-weight-medium); cursor:pointer; font-family:var(--font-family-base);">1</button>
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--neutral-200); background:var(--neutral-0); border-radius:var(--radius-md); color:var(--neutral-600); font-size:var(--font-size-xs); cursor:pointer; font-family:var(--font-family-base);">2</button>
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--neutral-200); background:var(--neutral-0); border-radius:var(--radius-md); color:var(--neutral-600); font-size:var(--font-size-xs); cursor:pointer; font-family:var(--font-family-base);">3</button>
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-400); padding:0 2px;">...</span>
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--neutral-200); background:var(--neutral-0); border-radius:var(--radius-md); color:var(--neutral-600); font-size:var(--font-size-xs); cursor:pointer; font-family:var(--font-family-base);">13</button>
|
|
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--neutral-200); background:var(--neutral-0); border-radius:var(--radius-md); color:var(--neutral-600); cursor:pointer; font-family:var(--font-family-base);">
|
|
<i data-lucide="chevron-right" style="width:14px; height:14px;"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<script>lucide.createIcons();</script>
|
|
</body>
|
|
</html> |