bytefun
Version:
一个打通了原型设计、UI设计与代码转换、跨平台原生代码开发等的平台
1,647 lines (1,496 loc) • 208 kB
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>枫叶小说APP UI设计规范</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.1/spectrum.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.1/spectrum.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg-primary: #1B1B1B;
--bg-secondary: #232323;
--bg-tertiary: #2C2C2C;
--bg-text: #494949;
--text-primary: #FFFFFF;
--text-secondary: #8E8E93;
--border-color: #2C2C2C;
--input-bg: #232323;
}
[data-theme="light"] {
--bg-primary: #FDFDFD;
--bg-secondary: #F5F5F5;
--bg-tertiary: #E8E8E8;
--bg-text: #E8E8E8;
--text-primary: #1C1C1E;
--text-secondary: #6D6D70;
--border-color: #D1D1D6;
--input-bg: #FFFFFF;
}
body {
font-family: 'Poppins', 'Arial', sans-serif;
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
transition: background-color 0.3s ease, color 0.3s ease;
}
.container {
margin: 0 auto;
padding-top: 12px;
padding-bottom: 12px;
}
.header {
text-align: center;
margin-bottom: 18px;
padding: 16px;
background: linear-gradient(135deg, #007AFF, #5856D6);
color: white;
border-radius: 8px;
}
.header h1 {
font-size: 20px;
font-weight: 700;
margin-bottom: 6px;
}
.header p {
font-size: 14px;
opacity: 0.9;
}
.section {
background: var(--bg-secondary);
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
box-shadow: 0 2px 6px #00000040;
border: 1px solid var(--border-color);
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.section-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 6px;
}
.subsection {
margin-bottom: 16px;
}
.subsection-title {
font-size: 16px;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 10px;
}
.theme-toggle {
position: fixed;
top: 20px;
right: 36px;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 20px;
padding: 6px 12px;
cursor: pointer;
font-size: 12px;
color: var(--text-primary);
transition: all 0.3s ease;
z-index: 1000;
}
.theme-toggle:hover {
background: var(--bg-tertiary);
}
.save-button {
position: fixed;
top: 20px;
right: 130px;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 20px;
padding: 6px 12px;
cursor: pointer;
font-size: 12px;
color: var(--text-primary);
transition: all 0.3s ease;
z-index: 1000;
}
.save-button:hover {
background: var(--bg-tertiary);
}
.preview-button {
position: fixed;
top: 20px;
right: 199px;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 20px;
padding: 6px 12px;
cursor: pointer;
font-size: 12px;
color: var(--text-primary);
transition: all 0.3s ease;
z-index: 1000;
}
.preview-button:hover {
background: var(--bg-tertiary);
}
/* 手机预览侧滑面板样式 */
.phone-preview-overlay {
position: fixed;
top: 0;
right: -280px;
width: 280px;
height: 100%;
z-index: 10001;
transition: right 0.3s ease;
pointer-events: none;
}
.phone-preview-overlay .phone-frame {
pointer-events: auto;
}
.phone-preview-overlay .phone-frame * {
pointer-events: auto;
}
.phone-preview-overlay.show {
right: 0;
}
.phone-preview-overlay.dragging {
transition: none;
cursor: grabbing;
}
.phone-frame {
width: 413px;
height: 872px;
background: #1a1a1a;
border-radius: 30px;
padding: 10px;
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%) scale(0.6);
transform-origin: left center;
user-select: none;
}
.phone-frame:not(.dragging) {
cursor: default;
}
.phone-frame.dragging {
cursor: move;
}
.phone-frame .phone-content {
user-select: auto;
cursor: auto;
}
.phone-frame .phone-content input {
user-select: auto;
cursor: text;
pointer-events: auto;
position: relative;
z-index: 1;
}
.phone-frame .preview-input-demo {
user-select: auto;
cursor: text;
pointer-events: auto;
position: relative;
z-index: 1;
}
.phone-frame.dragging {
cursor: grabbing;
z-index: 10005;
}
.phone-screen {
width: 393px;
height: 852px;
background: #FFFFFF;
border-radius: 20px;
overflow: hidden;
position: relative;
}
.phone-content {
width: 100%;
height: 100%;
overflow-y: auto;
padding: 16px;
box-sizing: border-box;
}
.preview-header {
text-align: center;
padding: 20px 0;
border-bottom: 1px solid #E5E5EA;
margin-bottom: 20px;
}
.preview-title {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.preview-subtitle {
font-size: 14px;
opacity: 0.7;
}
.preview-section {
margin-bottom: 24px;
}
.preview-card {
background-color: #FFFFFF;
border-radius: 12px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 16px;
}
.preview-section-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 12px;
}
.preview-typography {
margin-bottom: 8px;
}
.preview-buttons {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
align-items: center;
}
.preview-button-demo {
padding: 12px 16px;
border: none;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
min-width: 120px;
display: flex;
align-items: center;
justify-content: center;
}
.preview-button-demo i {
font-size: 16px;
}
.preview-inputs {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.preview-input-demo {
padding: 12px;
border: 1px solid #E5E5EA;
border-radius: 8px;
font-size: 14px;
outline: none;
}
.preview-toasts {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.preview-toast-demo {
padding: 8px 12px;
border-radius: 20px;
color: white;
text-align: center;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
min-height: 32px;
}
.phone-close-btn {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
background: #FF3B30;
border: none;
border-radius: 50%;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
z-index: 10002;
}
.phone-close-btn:hover {
background: #DC3545;
}
/* 预览对话框样式 */
.preview-dialog-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 10003;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.preview-dialog-overlay.show {
opacity: 1;
visibility: visible;
}
.preview-dialog {
background: white;
border-radius: 12px;
padding: 20px;
max-width: 200px;
text-align: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.preview-dialog-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 12px;
}
.preview-dialog-message {
font-size: 14px;
margin-bottom: 16px;
line-height: 1.4;
}
.preview-dialog-button {
padding: 8px 16px;
border: none;
border-radius: 6px;
font-weight: 500;
cursor: pointer;
}
.component-state-toggle {
position: absolute;
top: 8px;
right: 8px;
display: flex;
align-items: center;
gap: 4px;
font-size: 10px;
color: var(--text-secondary);
}
.component-state-toggle input[type="checkbox"] {
width: 12px;
height: 12px;
cursor: pointer;
}
.component-item {
position: relative;
}
.component-controls {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 12px;
font-size: 10px;
padding-right: 20px;
}
.component-control-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.component-control-label {
color: var(--text-secondary);
font-size: 9px;
}
.component-control-input {
display: flex;
align-items: center;
gap: 4px;
}
.component-control-input input[type="color"] {
width: 20px;
height: 16px;
border: none;
border-radius: 2px;
cursor: pointer;
}
.component-control-input span {
font-family: 'Monaco', monospace;
font-size: 9px;
color: var(--text-secondary);
}
.spectrum-color-picker {
width: 30px;
height: 20px;
border: 1px solid var(--border-color);
border-radius: 3px;
cursor: pointer;
}
/* 自定义Spectrum颜色选择器样式 */
.sp-replacer {
background: transparent !important;
border: 1px solid var(--border-color) !important;
border-radius: 3px !important;
padding: 0 !important;
width: 30px !important;
height: 20px !important;
overflow: hidden !important;
}
.sp-preview {
width: 100% !important;
height: 100% !important;
border: none !important;
margin: 0 !important;
}
.sp-dd {
display: none !important;
}
/* 颜色选择面板主题样式 */
.sp-container {
background-color: var(--bg-secondary) !important;
border: 1px solid #6D6D70 !important;
border-radius: 8px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
z-index: 9999 !important;
}
.sp-top {
background-color: var(--bg-secondary) !important;
}
.sp-color,
.sp-hue {
border: 1px solid var(--border-color) !important;
}
.sp-input-container {
background-color: var(--bg-tertiary) !important;
}
.sp-input {
background-color: var(--input-bg) !important;
border: 1px solid var(--border-color) !important;
color: var(--text-primary) !important;
}
.sp-palette-container {
background-color: var(--bg-secondary) !important;
border-top: 1px solid var(--border-color) !important;
border-right: 1px solid var(--border-color) !important;
}
.sp-picker-container {
border-left: 1px solid var(--border-color) !important;
}
.sp-thumb-el {
border: 2px solid #fff !important;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) !important;
}
.sp-alpha-handle,
.sp-hue-handle {
border: 2px solid #fff !important;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) !important;
}
.sp-button-container {
background-color: var(--bg-tertiary) !important;
border-top: 1px solid var(--border-color) !important;
}
.sp-cancel {
background-color: var(--bg-tertiary) !important;
border: 1px solid var(--border-color) !important;
color: var(--text-primary) !important;
}
.sp-container .sp-button-container .sp-choose {
background-color: #007AFF !important;
border: 1px solid #007AFF !important;
color: #FFFFFF !important;
background-image: none !important;
}
.sp-cancel:hover {
background-color: var(--bg-primary) !important;
}
.sp-container .sp-button-container .sp-choose:hover {
background-color: #0056CC !important;
background-image: none !important;
}
/* 移除白色竖线和间距 */
.sp-sat,
.sp-val,
.sp-top-inner {
border: none !important;
}
.sp-hue {
border-left: none !important;
border-right: none !important;
}
.sp-color {
border-right: none !important;
}
.sp-fill {
border: none !important;
}
.color-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
margin-bottom: 12px;
}
.color-item {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 6px;
background: var(--bg-tertiary);
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.color-name-row {
display: flex;
align-items: center;
}
.color-name {
font-weight: 600;
color: var(--text-primary);
font-size: 13px;
flex: 1;
}
.color-controls-row {
display: flex;
align-items: center;
gap: 8px;
}
.color-input {
width: 32px;
height: 24px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.color-value {
font-family: 'Monaco', monospace;
font-size: 11px;
color: var(--text-secondary);
flex: 1;
margin-left: 4px;
}
.color-usage-row {
display: flex;
}
.color-usage {
width: 100%;
font-size: 11px;
background: var(--input-bg);
border: 1px solid var(--border-color);
border-radius: 3px;
padding: 4px 6px;
color: var(--text-primary);
outline: none;
min-height: 32px;
resize: vertical;
font-family: inherit;
line-height: 1.4;
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.font-demo {
margin-bottom: 12px;
}
.font-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
border: 1px solid var(--border-color);
border-radius: 6px;
margin-bottom: 6px;
background: var(--bg-text);
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.font-preview {
flex: 1;
}
.font-controls {
display: flex;
gap: 6px;
align-items: center;
font-size: 12px;
flex-wrap: wrap;
}
.font-color-value {
font-family: 'Monaco', monospace;
font-size: 10px;
color: var(--text-secondary);
margin-left: 4px;
}
.font-bold-checkbox {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--text-primary);
}
.font-bold-checkbox input[type="checkbox"] {
width: 14px;
height: 14px;
cursor: pointer;
}
.size-input {
width: auto;
min-width: 30px;
max-width: 80px;
padding: 3px 6px;
border: 1px solid var(--border-color);
border-radius: 3px;
font-size: 11px;
background: var(--input-bg);
color: var(--text-primary);
outline: none;
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.size-input:focus {
border-color: var(--border-color);
}
.component-demo {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 12px;
}
.component-item {
padding: 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
background: var(--bg-tertiary);
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.component-title {
font-weight: 600;
margin-bottom: 8px;
color: var(--text-primary);
font-size: 14px;
}
.btn {
padding: 8px 16px;
border-radius: 6px;
border: none;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
margin: 3px;
font-size: 13px;
}
/* 按钮样式将通过JavaScript动态生成 */
.input-demo {
width: 100%;
padding: 5px;
font-size: 13px;
margin: 3px 0;
outline: none;
box-sizing: border-box;
/* 其他样式将通过JavaScript动态生成 */
}
/* 通用输入框样式 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
.input-demo,
.preview-input-demo {
box-sizing: border-box !important;
padding: 5px !important;
}
/* 通用输入框聚焦样式 */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus,
.input-demo:focus,
.preview-input-demo:focus {
border: 1px solid #06677a !important;
outline: none !important;
box-sizing: border-box !important;
}
.spacing-demo {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 12px;
}
.spacing-item {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
background: var(--bg-tertiary);
border-radius: 6px;
color: var(--text-primary);
font-size: 12px;
transition: background-color 0.3s ease, color 0.3s ease;
}
.spacing-preview {
width: 16px;
height: 16px;
background: #007AFF;
border-radius: 3px;
}
.add-item-btn {
background: #049c2b;
color: white;
border: none;
padding: 6px;
border-radius: 50%;
cursor: pointer;
font-size: 12px;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 0;
margin-top: 8px;
}
.add-item-btn:hover {
background: #28A745;
}
.title-with-add {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.title-with-add h2,
.title-with-add h3 {
margin: 0;
margin-top: 10px;
margin-right: 8px;
}
.delete-btn {
background: #FF3B30;
color: white;
border: none;
padding: 3px 6px;
border-radius: 3px;
cursor: pointer;
font-size: 10px;
}
.delete-btn:hover {
background: #DC3545;
}
.editable-input {
border: 1px solid var(--border-color);
border-radius: 3px;
padding: 3px 6px;
font-size: 10px;
width: auto;
min-width: 40px;
max-width: 120px;
background: var(--input-bg);
color: var(--text-primary);
outline: none;
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.editable-input:focus {
border-color: var(--border-color);
}
/* 自适应宽度的文本输入框 */
.auto-width-input {
width: auto;
min-width: 30px;
max-width: 150px;
padding: 3px 6px;
border: 1px solid var(--border-color);
border-radius: 3px;
font-size: 11px;
background: var(--input-bg);
color: var(--text-primary);
outline: none;
transition: all 0.3s ease;
}
.auto-width-input:focus {
border-color: var(--border-color);
}
/* 透明背景的自适应输入框 */
.transparent-auto-input {
background: transparent;
border: none;
outline: none;
width: auto;
min-width: 30px;
max-width: 200px;
font-size: inherit;
font-weight: inherit;
color: inherit;
}
.toast-demo {
display: inline-block;
padding: 8px 12px;
border-radius: 14px;
color: white;
margin: 3px;
min-height: 32px;
max-width: 140px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
/* Toast样式将通过JavaScript动态生成 */
/* 自定义确认删除弹框样式 */
.custom-confirm-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.custom-confirm-overlay.show {
opacity: 1;
visibility: visible;
}
.custom-confirm-dialog {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 24px;
min-width: 320px;
max-width: 400px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
transform: scale(0.9);
transition: transform 0.3s ease;
}
.custom-confirm-overlay.show .custom-confirm-dialog {
transform: scale(1);
}
.custom-confirm-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 12px;
text-align: center;
}
.custom-confirm-message {
font-size: 14px;
color: var(--text-primary);
margin-bottom: 24px;
text-align: center;
line-height: 1.5;
}
.custom-confirm-buttons {
display: flex;
gap: 12px;
justify-content: center;
}
.custom-confirm-btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
min-width: 80px;
}
/* 按钮样式将通过JavaScript动态应用UI规范数据 */
</style>
</head>
<body>
<!-- 自定义确认删除弹框 -->
<div class="custom-confirm-overlay" id="customConfirmOverlay">
<div class="custom-confirm-dialog">
<div class="custom-confirm-title">确认删除</div>
<div class="custom-confirm-message" id="customConfirmMessage">确定要删除这个项目吗？此操作无法撤销。</div>
<div class="custom-confirm-buttons">
<button class="custom-confirm-btn custom-confirm-btn-cancel"
onclick="hideCustomConfirm(false)">取消</button>
<button class="custom-confirm-btn custom-confirm-btn-confirm"
onclick="hideCustomConfirm(true)">确定</button>
</div>
</div>
</div>
<!-- 手机预览浮层 -->
<div class="phone-preview-overlay" id="phonePreviewOverlay">
<div class="phone-frame">
<button class="phone-close-btn" onclick="togglePhonePreview()">
<i class="fas fa-times"></i>
</button>
<div class="phone-screen">
<div class="phone-content" id="phoneContent">
<!-- 预览内容将通过JavaScript动态生成 -->
</div>
<!-- 预览对话框 -->
<div class="preview-dialog-overlay" id="previewDialogOverlay">
<div class="preview-dialog">
<div class="preview-dialog-title">提示</div>
<div class="preview-dialog-message">这是一个使用UI规范的对话框示例</div>
<button class="preview-dialog-button" onclick="hidePreviewDialog()">确定</button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="header">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
<h1>枫叶小说APP UI设计规范</h1>
<p>交互式设计规范展示与编辑工具</p>
</div>
<div class="preview-button" onclick="togglePhonePreview()"
style="position: fixed; z-index: 1000; margin: 0;">
<i class="fas fa-mobile-alt"></i>
<span>预览界面</span>
</div>
<div class="save-button" onclick="saveConfig()" style="position: fixed; z-index: 1000; margin: 0;">
<i class="fas fa-save"></i>
<span>保存</span>
</div>
<div class="theme-toggle" onclick="toggleTheme()" style="position: fixed; z-index: 1000; margin: 0;">
<i class="fas fa-sun"></i>
<span id="theme-text">亮色模式</span>
</div>
</div>
</div>
<!-- 颜色规范 -->
<div class="section">
<h2 class="section-title">
<i class="fas fa-palette"></i>
颜色规范
</h2>
<div class="subsection">
<div class="title-with-add">
<h3 class="subsection-title">1、品牌色系统</h3>
<button class="add-item-btn" onclick="addColorItem('brand')" title="添加品牌色">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="color-grid" id="brand-colors">
<!-- 动态生成 -->
</div>
</div>
<div class="subsection">
<div class="title-with-add">
<h3 class="subsection-title">2、功能色系统</h3>
<button class="add-item-btn" onclick="addColorItem('functional')" title="添加功能色">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="color-grid" id="functional-colors">
<!-- 动态生成 -->
</div>
</div>
<div class="subsection">
<div class="title-with-add">
<h3 class="subsection-title">3、常用色系统</h3>
<button class="add-item-btn" onclick="addColorItem('common')" title="添加常用色">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="color-grid" id="common-colors">
<!-- 动态生成 -->
</div>
</div>
</div>
<!-- 字体规范 -->
<div class="section">
<div class="title-with-add">
<h2 class="section-title">
<i class="fas fa-font"></i>
字体规范
</h2>
<button class="add-item-btn" onclick="addFontItem()" title="添加字体样式">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="font-demo" id="font-demo">
<!-- 动态生成 -->
</div>
</div>
<!-- 组件规范 -->
<div class="section">
<h2 class="section-title">
<i class="fas fa-cube"></i>
组件规范
</h2>
<div id="components-container">
<!-- 动态生成所有组件类型 -->
</div>
</div>
<!-- 间距规范 -->
<div class="section">
<div class="title-with-add">
<h2 class="section-title">
<i class="fas fa-ruler"></i>
间距规范
</h2>
<button class="add-item-btn" onclick="addSpacingItem()" title="添加间距规范">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="spacing-demo" id="spacing-demo">
<!-- 动态生成 -->
</div>
</div>
</div>
<script>
// UI设计规范数据结构
let uiDesignData = {
"version": "1.0.0",
"cnName": "小说之家APP UI设计规范",
"colors": {
"brand": [
{
"enName": "primary",
"cnName": "主色",
"value": "#FF6B35",
"usage": "主要操作按钮、阅读按钮、重要信息强调、品牌标识"
},
{
"enName": "secondary",
"cnName": "次色",
"value": "#4A90E2",
"usage": "次要操作、书架管理、分类标签"
},
{
"enName": "tertiary",
"cnName": "第三色",
"value": "#9B59B6",
"usage": "VIP标识、特殊徽章、推荐标签"
},
{
"enName": "primaryHover",
"cnName": "主色Hover",
"value": "#fe723f",
"usage": "主色在hover状态下的颜色"
},
{
"enName": "secondaryHover",
"cnName": "次色Hover",
"value": "#5596e2",
"usage": "次色在hover状态下的颜色"
},
{
"enName": "tertiaryHover",
"cnName": "第三色Hover",
"value": "#9c5eb5",
"usage": "第三色在hover状态下的颜色"
},
{
"enName": "primaryBgText",
"cnName": "主色背景文字色",
"value": "#FFFFFF",
"usage": "主色背景上的文字颜色"
},
{
"enName": "secondaryBgText",
"cnName": "次色背景文字色",
"value": "#FFFFFF",
"usage": "次色背景上的文字颜色"
}
],
"functional": [
{
"enName": "success",
"cnName": "成功色",
"value": "#34C759",
"usage": "成功状态、完成操作提示"
},
{
"enName": "warning",
"cnName": "警告色",
"value": "#FF9500",
"usage": "警告信息、需要注意的内容"
},
{
"enName": "error",
"cnName": "错误色",
"value": "#FF3B30",
"usage": "错误状态、失败操作提示"
},
{
"enName": "info",
"cnName": "信息色",
"value": "#5AC8FA",
"usage": "一般信息提示、帮助说明"
}
],
"common": [
{
"enName": "pageBgColor",
"cnName": "页面背景色",
"value": "#FAFAFA",
"usage": "主要页面背景"
},
{
"enName": "readingBgColor",
"cnName": "阅读背景色",
"value": "#FFF8E1",
"usage": "阅读器护眼背景色"
},
{
"enName": "nightBgColor",
"cnName": "夜间背景色",
"value": "#1A1A1A",
"usage": "夜间模式背景"
},
{
"enName": "shadow",
"cnName": "阴影色",
"value": "#00000015",
"usage": "书籍卡片阴影、浮层阴影"
},
{
"enName": "mask",
"cnName": "遮罩色",
"value": "#00000080",
"usage": "弹窗遮罩、模态框背景"
},
{
"enName": "border",
"cnName": "边框色",
"value": "#E8E8E8",
"usage": "组件边框、分割线"
},
{
"enName": "focusBorder",
"cnName": "悬停/聚焦边框色",
"value": "#FF6B35",
"usage": "输入框聚焦、按钮悬停边框"
}
]
},
"typography": [
{
"enName": "largeTitle",
"cnName": "大标题",
"size": 24,
"weight": 700,
"color": "#2C2C2E",
"usage": "页面主标题、小说标题"
},
{
"enName": "mediumTitle",
"cnName": "中标题",
"size": 20,
"weight": 600,
"color": "#2C2C2E",
"usage": "章节标题、分类标题"
},
{
"enName": "smallTitle",
"cnName": "小标题",
"size": 18,
"weight": 500,
"color": "#2C2C2E",
"usage": "卡片标题、作者名称"
},
{
"enName": "bodyText",
"cnName": "正文内容",
"size": 16,
"weight": 400,
"color": "#3A3A3C",
"usage": "小说内容、描述文字"
},
{
"enName": "readingText",
"cnName": "阅读正文",
"size": 18,
"weight": 400,
"color": "#2C2C2E",
"usage": "阅读器内小说正文"
},
{
"enName": "helperText",
"cnName": "辅助文字",
"size": 14,
"weight": 400,
"color": "#8E8E93",
"usage": "提示文字、次要信息"
},
{
"enName": "captionText",
"cnName": "说明文字",
"size": 12,
"weight": 400,
"color": "#AEAEB2",
"usage": "时间戳、字数统计、版权信息"
}
],
"spacing": [
{
"enName": "tiny",
"cnName": "极小间距",
"value": 4,
"usage": "图标与文字间距、标签内边距"
},
{
"enName": "small",
"cnName": "小间距",
"value": 8,
"usage": "组件内部元素间距、按钮内边距"
},
{
"enName": "medium",
"cnName": "中间距",
"value": 16,
"usage": "卡片内边距、表单元素间距"
},
{
"enName": "large",
"cnName": "大间距",
"value": 24,
"usage": "页面边距、模块间距"
},
{
"enName": "extraLarge",
"cnName": "超大间距",
"value": 32,
"usage": "页面顶部间距、重要模块分隔"
},
{
"enName": "pageHorizontal",
"cnName": "页面左右间距",
"value": 16,
"usage": "页面内容左右边距"
},
{
"enName": "readingLineHeight",
"cnName": "阅读行间距",
"value": 28,
"usage": "阅读器文字行高"
},
{
"enName": "readingParagraph",
"cnName": "阅读段落间距",
"value": 20,
"usage": "阅读器段落间距"
}
],
"components": {
"buttons": [
{
"enName": "primary",
"cnName": "主要按钮",
"normal": {
"backgroundColor": "#FF6B35",
"textColor": "#FFFFFF",
"hoverBackgroundColor": "#E55A2B"
},
"disabled": {
"backgroundColor": "#E5E5EA",
"textColor": "#8E8E93"
},
"borderRadius": 12
},
{
"enName": "secondary",
"cnName": "次要按钮",
"normal": {
"backgroundColor": "#F8F9FA",
"textColor": "#6b6b6b",
"hoverBackgroundColor": "#E9ECEF"
},
"disabled": {
"backgroundColor": "#F2F2F7",
"textColor": "#C7C7CC"
},
"borderRadius": 12
},
{
"enName": "textButton",
"cnName": "文字按钮",
"normal": {
"backgroundColor": "#00000000",
"textColor": "#FF6B35",
"hoverBackgroundColor": "#FFF5F2"
},
"disabled": {
"backgroundColor": "#00000000",
"textColor": "#AEAEB2"
},
"borderRadius": 8
},
{
"enName": "readingButton",
"cnName": "阅读按钮",
"normal": {
"backgroundColor": "#FF6B35",
"textColor": "#FFFFFF",
"hoverBackgroundColor": "#E55A2B"
},
"disabled": {
"backgroundColor": "#E5E5EA",
"textColor": "#8E8E93"
},
"borderRadius": 20
},
{
"enName": "bookmarkButton",
"cnName": "收藏按钮",
"normal": {
"backgroundColor": "#F8F9FA",
"textColor": "#9B59B6",
"hoverBackgroundColor": "#F3E5F5"
},
"disabled": {
"backgroundColor": "#F2F2F7",
"textColor": "#C7C7CC"
},
"borderRadius": 16
},
{
"enName": "iconButton",
"cnName": "图标按钮",
"normal": {
"backgroundColor": "#FF6B35",
"textColor": "#FFFFFF",
"hoverBackgroundColor": "#E55A2B"
},
"disabled": {
"backgroundColor": "#E5E5EA",
"textColor": "#8E8E93"
},
"borderRadius": 12
}
],
"inputs": [
{
"enName": "default",
"cnName": "默认输入框",
"normal": {
"backgroundColor": "#FFFFFF",
"borderColor": "#E8E8E8",
"textColor": "#2C2C2E",
"placeholderColor": "#8E8E93",
"focusBorderColor": "#FF6B35"
},
"disabled": {
"backgroundColor": "#F2F2F7",
"borderColor": "#E5E5EA",
"textColor": "#8E8E93"
},
"borderRadius": 12
},
{
"enName": "search",
"cnName": "搜索输入框",
"normal": {
"backgroundColor": "#F8F9FA",
"borderColor": "#00000000",
"textColor": "#2C2C2E",
"placeholderColor": "#8E8E93",
"focusBorderColor": "#FF6B35"
},
"disabled": {
"backgroundColor": "#F2F2F7",
"borderColor": "#00000000",
"textColor": "#8E8E93"
},
"borderRadius": 20
}
],
"toasts": [
{
"enName": "info",
"cnName": "信息提示",
"backgroundColor": "#000000CF",
"textColor": "#FFFFFF",
"borderRadius": 20,
"minHeight": 45,
"maxWidth": 200
},
{
"enName": "success",
"cnName": "成功提示",
"backgroundColor": "#34C759",
"textColor": "#FFFFFF",
"borderRadius": 20,
"minHeight": 45,
"maxWidth": 200
},
{
"enName": "warning",
"cnName": "警告提示",
"backgroundColor": "#FF9500",
"textColor": "#FFFFFF",
"borderRadius": 20,
"minHeight": 45,
"maxWidth": 200
},
{
"enName": "error",
"cnName": "错误提示",
"backgroundColor": "#FF3B30",
"textColor": "#FFFFFF",
"borderRadius": 20,
"minHeight": 45,
"maxWidth": 200
}
],
"cards": [
{
"enName": "book",
"cnName": "书籍卡片",
"backgroundColor": "#FFFFFF",
"hoverBackgroundColor": "#F8F9FA",
"borderColor": "#E8E8E8",
"borderRadius": 12,
"shadow": "0 2px 12px #00000010",
"usage": "书籍信息展示卡片"
},
{
"enName": "chapter",
"cnName": "章节卡片",
"backgroundColor": "#FFFFFF",
"hoverBackgroundColor": "#FFF5F2",
"borderColor": "#F0F0F0",
"borderRadius": 8,
"shadow": "0 1px 4px #00000008",
"usage": "章节列表卡片"
},
{
"enName": "author",
"cnName": "作者卡片",
"backgroundColor": "#FFFFFF",
"hoverBackgroundColor": "#F3E5F5",
"borderColor": "#E8E8E8",
"borderRadius": 16,
"shadow": "0 2px 8px #00000012",
"usage": "作者信息展示卡片"
}
],
"tagOrStatus": [
{
"enName": "completed",
"cnName": "完结状态",
"backgroundColor": "#F6FFED",
"textColor": "#52C41A",
"borderRadius": 12,
"borderColor": "#B7EB8F"
},
{
"enName": "updating",
"cnName": "连载状态",
"backgroundColor": "#E6F7FF",
"textColor": "#1890FF",
"borderRadius": 12,
"borderColor": "#91D5FF"
},
{
"enName": "vip",
"cnName": "VIP标识",
"backgroundColor": "#F