root/aurora-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(S9-P7): CSS 端接线为样式底座——11 页 H5 内联组件样式并入 CSS 文件并 link 接线（单一样式真源）；PLATFORMS 将 css 列重定义为样式层/交付物；值冲突按 components.css 裁决（令牌/逻辑属性优先），顺带修复 Select 定位与选择列居中两处内联版缺陷

Browse Source
This commit is contained in:
aurora-admin
2026-09-25 04:22:03 +08:00
parent b59247231a
commit f07f38b09d
20 changed files with 2482 additions and 2113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frameworks/Button.css
+8 -10
View File
@@ -5,9 +5,9 @@
white-space: nowrap; font-size: 14px; line-height: 22px;
border-radius: 4px; min-width: 64px; padding: 0 12px;
box-sizing: border-box; transition: background .15s, border-color .15s;
font-family: "PingFang SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
}
.btn:focus-visible { outline: 2px solid rgba(47,84,235,0.2); outline-offset: 2px; }
font-family: var(--kole-font-family);
flex-shrink: 0;}
.btn:focus-visible { outline: 2px solid var(--kole-color-focus-ring); outline-offset: 2px; }
.btn-primary { background: var(--kole-color-brand); color: var(--kole-color-text-inverse); }
.btn-primary:hover { background: var(--kole-color-brand-hover); }
@@ -25,13 +25,11 @@
.btn-danger { background: var(--kole-color-error); color: var(--kole-color-text-inverse); }
.btn-danger:hover { filter: brightness(.92); }
.btn-lg { height: 40px; }
.btn-md { height: 32px; }
.btn-sm { height: 24px; }
.btn-lg { height: var(--kole-control-height-large); }
.btn-md { height: var(--kole-control-height-default); }
.btn-sm { height: var(--kole-control-height-small); }
.btn-disabled, .btn:disabled {
background: var(--kole-color-disabled-bg); border-color: transparent; color: var(--kole-color-text-disabled); cursor: not-allowed;
}
.btn-disabled, .btn:disabled { background: var(--kole-color-disabled-bg); border-color: transparent; color: var(--kole-color-text-placeholder); cursor: not-allowed; }
.btn-disabled:hover, .btn:disabled:hover { background: var(--kole-color-disabled-bg); filter: none; }
.btn .btn-icon { flex-shrink: 0; }
@@ -41,5 +39,5 @@
.btn .spinner {
width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent;
border-radius: 50%; animation: kole-btn-spin .6s linear infinite;
}
display: inline-block;}
@keyframes kole-btn-spin { to { transform: rotate(360deg); } }
frameworks/Button.html
+3 -42
View File
@@ -6,49 +6,10 @@
<title>Kole UI · Button (H5)</title>
<!-- 复用设计系统 token，保证与组件库一致 -->
<link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css">
<link rel="stylesheet" href="./Button.css">
<style>
/* 以下按钮样式对齐 components.css 与 button.json 契约 */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--space-4); border: 1px solid transparent; cursor: pointer;
white-space: nowrap; font-size: var(--font-size-body); line-height: var(--line-height-body);
border-radius: var(--radius-base); min-width: 64px; padding: 0 var(--space-12);
flex-shrink: 0; transition: background .15s, border-color .15s;
font-family: var(--font-family); box-sizing: border-box;
}
.btn:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.btn-primary { background: var(--color-brand); color: var(--color-text-inverse); }
.btn-primary:hover { background: var(--color-brand-hover); }
.btn-primary:active { background: var(--color-brand-active); }
.btn-default { background: var(--color-bg-card); border-color: var(--color-border); color: var(--color-text-body); }
.btn-default:hover { border-color: var(--color-brand); }
.btn-text { background: transparent; color: var(--color-brand); }
.btn-text:hover { background: var(--color-brand-bg); }
.btn-link { background: transparent; border: none; color: var(--color-brand); min-width: auto; padding: 0; }
.btn-link:hover { background: var(--color-brand-bg); }
.btn-danger { background: var(--color-error); color: var(--color-text-inverse); }
.btn-danger:hover { filter: brightness(.92); }
.btn-lg { height: var(--control-height-large); }
.btn-md { height: var(--control-height-default); }
.btn-sm { height: var(--control-height-small); }
.btn-disabled, .btn:disabled {
background: var(--color-bg-disabled); border-color: transparent;
color: var(--color-text-placeholder); cursor: not-allowed;
}
.btn-disabled:hover, .btn:disabled:hover { background: var(--color-bg-disabled); filter: none; }
/* 加载态：旋转 spinner + 文字 */
.btn.is-loading { cursor: progress; position: relative; }
.btn.is-loading .btn-label { opacity: .65; }
.btn .spinner {
width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent;
border-radius: 50%; animation: btn-spin .6s linear infinite; display: inline-block;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
/* 演示页布局 */
body { margin: 0; padding: 24px; background: var(--color-bg-page); color: var(--color-text-body);
font-family: var(--font-family); }
/* 演示页布局脚手架 —— 组件样式已并入 Button.css（S9-P7 单一样式真源） */
body { margin: 0; padding: 24px; background: var(--color-bg-page); color: var(--color-text-body); font-family: var(--font-family); }
h1 { font-size: var(--font-size-h1); margin: 0 0 4px; }
.sub { color: var(--color-text-secondary); margin: 0 0 24px; font-size: var(--font-size-caption); }
.group { margin-bottom: 24px; }
frameworks/Dropdown.html
+2 -21
View File
@@ -5,31 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kole UI · Dropdown (H5)</title>
<link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css">
<link rel="stylesheet" href="./Dropdown.css">
<style>
/* 对齐 组件2.txt Dropdown 规范：项高32px、内边距左右12px、悬停 #F5F7FA、危险 #CF1322、面板圆角6px/阴影中/最小宽120px */
/* 演示页布局脚手架 —— 组件样式已并入 Dropdown.css（S9-P7 单一样式真源） */
.demo { padding: 24px; background: var(--kole-color-page-bg); color: var(--kole-color-text-body); font-family: var(--font-family); }
h1 { font-size: 20px; margin: 0 0 4px; }
.sub { color: var(--kole-color-text-secondary); margin: 0 0 24px; font-size: 12px; }
.kole-dropdown { position: relative; display: inline-block; }
.kole-dropdown-trigger {
border: 1px solid var(--kole-color-border); background: var(--kole-color-card-bg); border-radius: 4px; height: 32px; padding: 0 12px;
cursor: pointer; font-size: 14px; color: var(--kole-color-text-body); display: inline-flex; align-items: center; gap: 4px;
}
.kole-dropdown-trigger:hover { border-color: var(--kole-color-brand); }
.kole-dropdown-panel {
position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 120px;
background: var(--kole-color-card-bg); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); padding: 4px 0;
}
.kole-dropdown-item {
display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; cursor: pointer;
font-size: 14px; color: var(--kole-color-text-body); white-space: nowrap;
}
.kole-dropdown-item:hover { background: var(--kole-color-page-bg); }
.kole-dropdown-item.is-danger { color: var(--kole-color-error); }
.kole-dropdown-item.is-disabled { color: var(--kole-color-text-disabled); cursor: not-allowed; }
.kole-dropdown-item.is-disabled:hover { background: transparent; }
.kole-dropdown-divider { height: 1px; background: var(--kole-color-border-strong); margin: 4px 0; }
</style>
</head>
<body>
frameworks/EmployeeCard.html
+2 -22
View File
@@ -5,33 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kole UI · EmployeeCard (H5)</title>
<link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css">
<link rel="stylesheet" href="./EmployeeCard.css">
<style>
/* 对齐 组件9.txt EmployeeCard 规范：头像/姓名/工号/部门/职位/状态、悬停快捷操作、标签、可显联系方式、圆角8px/阴影低/内边距16px */
/* 演示页布局脚手架 —— 组件样式已并入 EmployeeCard.css（S9-P7 单一样式真源） */
.demo { padding: 24px; background: var(--kole-color-page-bg); color: var(--kole-color-text-body); font-family: var(--font-family); }
h1 { font-size: 20px; margin: 0 0 4px; }
.sub { color: var(--kole-color-text-secondary); margin: 0 0 24px; font-size: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 16px; }
.kole-emp-card { width: 280px; background: var(--kole-color-card-bg); border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); padding: 16px; position: relative; box-sizing: border-box; }
.kole-emp-top { display: flex; align-items: center; gap: 12px; }
.kole-emp-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--kole-color-brand-bg); color: var(--kole-color-brand); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 18px; flex-shrink: 0; overflow: hidden; }
.kole-emp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kole-emp-name { font-size: 16px; font-weight: 600; color: var(--kole-color-text-title); display: flex; align-items: center; gap: 8px; }
.kole-emp-status { font-size: 12px; padding: 0 6px; border-radius: 2px; line-height: 18px; }
.kole-emp-status.active { background: var(--kole-color-tag-green-bg); color: var(--kole-color-success); }
.kole-emp-status.left { background: var(--kole-color-disabled-bg); color: var(--kole-color-text-secondary); }
.kole-emp-id { font-size: 12px; color: var(--kole-color-text-secondary); margin-top: 2px; }
.kole-emp-meta { margin-top: 12px; font-size: 13px; color: var(--kole-color-text-tertiary); line-height: 22px; }
.kole-emp-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.kole-emp-tag { background: var(--kole-color-brand-bg); color: var(--kole-color-brand); font-size: 12px; padding: 1px 8px; border-radius: 2px; }
.kole-emp-contact { margin-top: 12px; font-size: 13px; color: var(--kole-color-text-tertiary); line-height: 22px; border-top: 1px solid var(--kole-color-border-strong); padding-top: 10px; }
.kole-emp-actions {
position: absolute; top: 12px; right: 12px; display: none; gap: 4px;
background: var(--kole-color-card-bg); border: 1px solid var(--kole-color-border); border-radius: 4px; padding: 2px;
}
.kole-emp-card:hover .kole-emp-actions { display: flex; }
.kole-emp-actions button { border: none; background: none; cursor: pointer; color: var(--kole-color-text-secondary); font-size: 12px; padding: 2px 6px; border-radius: 3px; }
.kole-emp-actions button:hover { color: var(--kole-color-brand); background: var(--kole-color-brand-bg); }
</style>
</head>
<body>
frameworks/Input.css
+1 -5
View File
@@ -6,11 +6,7 @@
padding: 0 12px; background: var(--kole-color-card-bg); border: 1px solid var(--kole-color-border);
border-radius: 4px; transition: border-color .15s, box-shadow .15s; box-sizing: border-box;
}
.kole-input input {
border: none; outline: none; background: transparent; font-size: 14px;
color: var(--kole-color-text-body); min-width: 160px; flex: 1;
font-family: "PingFang SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
}
.kole-input input { border: none; outline: none; background: transparent; font-size: 14px; color: var(--kole-color-text-body); min-width: 160px; flex: 1; font-family: var(--kole-font-family); }
.kole-input input::placeholder { color: var(--kole-color-text-placeholder); }
.kole-input:focus-within { border-color: var(--kole-color-brand); box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
.kole-input.is-error { border-color: var(--kole-color-error); }
frameworks/Input.html
+2 -28
View File
@@ -5,36 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kole UI · Input (H5)</title>
<link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css">
<link rel="stylesheet" href="./Input.css">
<style>
/* 对齐 components.css 与 input.json 契约 */
/* 演示页布局脚手架 —— 组件样式已并入 Input.css（S9-P7 单一样式真源） */
.field { display: inline-flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.kole-input {
display: inline-flex; align-items: center; gap: 8px; height: 32px;
padding: 0 12px; background: var(--kole-color-card-bg); border: 1px solid var(--kole-color-border);
border-radius: 4px; transition: border-color .15s, box-shadow .15s; box-sizing: border-box;
}
.kole-input input {
border: none; outline: none; background: transparent; font-size: 14px;
color: var(--kole-color-text-body); min-width: 160px; flex: 1; font-family: var(--font-family);
}
.kole-input input::placeholder { color: var(--kole-color-text-placeholder); }
.kole-input:focus-within { border-color: var(--kole-color-brand); box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
.kole-input.is-error { border-color: var(--kole-color-error); }
.kole-input.is-error:focus-within { border-color: var(--kole-color-error); box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
.kole-input.is-disabled, .kole-input:disabled { background: var(--kole-color-disabled-bg); border-color: transparent; }
.kole-input.is-disabled input, .kole-input:disabled input { color: var(--kole-color-text-disabled); cursor: not-allowed; }
.kole-input .affix { display: inline-flex; flex-shrink: 0; color: var(--kole-color-text-secondary); align-items: center; }
.kole-input .action {
display: inline-flex; flex-shrink: 0; padding: 0; border: none; background: none;
cursor: pointer; color: var(--kole-color-text-secondary); align-items: center;
}
.kole-input .action:hover { color: var(--kole-color-brand); }
.kole-input-lg { height: 40px; }
.kole-input-sm { height: 24px; }
.kole-input-sm input { font-size: 12px; min-width: 120px; }
.error-text { font-size: 12px; color: var(--kole-color-error); line-height: 20px; }
/* 演示页布局 */
body { margin: 0; padding: 24px; background: var(--kole-color-page-bg); color: var(--kole-color-text-body); font-family: var(--font-family); }
h1 { font-size: 20px; margin: 0 0 4px; }
.sub { color: var(--kole-color-text-secondary); margin: 0 0 24px; font-size: 12px; }
frameworks/Modal.html
+2 -24
View File
@@ -5,34 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kole UI · Modal (H5)</title>
<link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css">
<link rel="stylesheet" href="./Modal.css">
<style>
/* 对齐 components.css 与 modal.json 契约 */
/* 演示页布局脚手架 —— 组件样式已并入 Modal.css（S9-P7 单一样式真源） */
.demo { padding: 24px; background: var(--kole-color-page-bg); color: var(--kole-color-text-body); font-family: var(--font-family); }
h1 { font-size: 20px; margin: 0 0 4px; }
.sub { color: var(--kole-color-text-secondary); margin: 0 0 24px; font-size: 12px; }
.kole-mask {
position: fixed; inset: 0; background: rgba(0,0,0,0.45);
display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.kole-modal {
background: var(--kole-color-card-bg); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
display: flex; flex-direction: column; max-width: 90vw;
}
.kole-modal--small { width: 320px; }
.kole-modal--default { width: 480px; }
.kole-modal--large { width: 680px; }
.kole-modal__header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 24px; font-size: 16px; font-weight: 600; color: var(--kole-color-text-title);
}
.kole-modal__close { border: none; background: none; cursor: pointer; color: var(--kole-color-text-secondary); font-size: 16px; line-height: 1; }
.kole-modal__close:hover { color: var(--kole-color-text-body); }
.kole-modal__body { padding: 0 24px 24px; color: var(--kole-color-text-body); font-size: 14px; line-height: 22px; }
.kole-modal__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 24px 16px; }
.btn-base { border-radius: 4px; padding: 4px 16px; height: 32px; cursor: pointer; font-size: 14px; }
.btn-ghost { border: 1px solid var(--kole-color-border); background: var(--kole-color-card-bg); color: var(--kole-color-text-body); }
.btn-primary { border: 1px solid var(--kole-color-brand); background: var(--kole-color-brand); color: var(--kole-color-text-inverse); }
</style>
</head>
<body>
frameworks/Segmented.html
+2 -13
View File
@@ -5,23 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kole UI · Segmented (H5)</title>
<link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css">
<link rel="stylesheet" href="./Segmented.css">
<style>
/* 对齐 组件2.txt Segmented 规范：高32px、选项内边距8px 16px、容器 #F5F7FA、圆角4px、选中白底、禁用 #BFBFBF */
/* 演示页布局脚手架 —— 组件样式已并入 Segmented.css（S9-P7 单一样式真源） */
.demo { padding: 24px; background: var(--kole-color-page-bg); color: var(--kole-color-text-body); font-family: var(--font-family); }
h1 { font-size: 20px; margin: 0 0 4px; }
.sub { color: var(--kole-color-text-secondary); margin: 0 0 24px; font-size: 12px; }
.kole-segmented {
display: inline-flex; align-items: center; background: var(--kole-color-page-bg); border-radius: 4px; padding: 2px;
}
.kole-segmented-item {
height: 28px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px;
border-radius: 4px; cursor: pointer; font-size: 14px; color: var(--kole-color-text-body); border: none; background: none;
transition: background .15s, color .15s;
}
.kole-segmented-item:hover:not(.is-active):not(.is-disabled) { color: var(--kole-color-brand); }
.kole-segmented-item.is-active { background: var(--kole-color-card-bg); color: var(--kole-color-text-body); box-shadow: 0 1px 2px rgba(0,0,0,0.08); font-weight: 500; }
.kole-segmented-item.is-disabled { color: var(--kole-color-text-disabled); cursor: not-allowed; }
</style>
</head>
<body>
frameworks/Select.css
+1 -1
View File
@@ -10,7 +10,7 @@
.kole-select.is-open .kole-select-trigger { border-color: var(--kole-color-brand); box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
.kole-select.is-disabled .kole-select-trigger { background: var(--kole-color-disabled-bg); border-color: transparent; color: var(--kole-color-text-disabled); cursor: not-allowed; }
.kole-select-trigger .placeholder { color: var(--kole-color-text-placeholder); }
.kole-select-trigger .caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); transition: transform .15s; color: var(--kole-color-text-secondary); }
.kole-select-trigger .caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); transition: transform .15s; color: var(--kole-color-text-secondary); pointer-events: none;}
.kole-select.is-open .caret { transform: translateY(-50%) rotate(180deg); }
.kole-select-trigger .tag {
display: inline-flex; align-items: center; gap: 4px; background: var(--kole-color-brand-bg); color: var(--kole-color-brand);
frameworks/Select.html
+2 -40
View File
@@ -5,53 +5,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kole UI · Select (H5)</title>
<link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css">
<link rel="stylesheet" href="./Select.css">
<style>
/* 对齐 components.css 与 select.json 契约（触发器样式同 Input） */
/* 演示页布局脚手架 —— 组件样式已并入 Select.css（S9-P7 单一样式真源） */
.demo { padding: 24px; background: var(--kole-color-page-bg); color: var(--kole-color-text-body); font-family: var(--font-family); }
h1 { font-size: 20px; margin: 0 0 4px; }
.sub { color: var(--kole-color-text-secondary); margin: 0 0 24px; font-size: 12px; }
.group { margin-bottom: 24px; }
.group h2 { font-size: 16px; margin: 0 0 12px; color: var(--kole-color-text-title); }
.row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.kole-select { position: relative; display: inline-block; min-width: 220px; }
.kole-select-trigger {
display: flex; align-items: center; gap: 8px; min-height: 32px; height: auto;
padding: 2px 28px 2px 12px; background: var(--kole-color-card-bg); border: 1px solid var(--kole-color-border);
border-radius: 4px; box-sizing: border-box; cursor: pointer; transition: border-color .15s, box-shadow .15s;
font-size: 14px; color: var(--kole-color-text-body); flex-wrap: wrap;
}
.kole-select-trigger:hover { border-color: var(--kole-color-brand); }
.kole-select.is-open .kole-select-trigger { border-color: var(--kole-color-brand); box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
.kole-select.is-disabled .kole-select-trigger { background: var(--kole-color-disabled-bg); border-color: transparent; color: var(--kole-color-text-disabled); cursor: not-allowed; }
.kole-select-trigger .placeholder { color: var(--kole-color-text-placeholder); }
.kole-select-trigger .caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); transition: transform .15s; color: var(--kole-color-text-secondary); pointer-events: none; }
.kole-select.is-open .caret { transform: translateY(-50%) rotate(180deg); }
.kole-select-trigger .tag {
display: inline-flex; align-items: center; gap: 4px; background: var(--kole-color-brand-bg); color: var(--kole-color-brand);
border-radius: 2px; padding: 1px 6px; font-size: 12px; line-height: 20px;
}
.kole-select-trigger .tag .x { cursor: pointer; }
.kole-select-panel {
position: absolute; z-index: 10; top: calc(100% + 4px); left: 0; right: 0;
background: var(--kole-color-card-bg); border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
max-height: 256px; overflow-y: auto; padding: 4px 0;
}
.kole-select-search { padding: 6px 8px; border-bottom: 1px solid var(--kole-color-border-strong); }
.kole-select-search input { width: 100%; box-sizing: border-box; border: 1px solid var(--kole-color-border); border-radius: 4px; padding: 4px 8px; font-size: 13px; outline: none; }
.kole-select-search input:focus { border-color: var(--kole-color-brand); }
.kole-select-group-label { padding: 6px 12px; font-size: 12px; color: var(--kole-color-text-secondary); }
.kole-select-option {
display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 32px; cursor: pointer;
font-size: 14px; color: var(--kole-color-text-body); box-sizing: border-box;
}
.kole-select-option:hover { background: var(--kole-color-page-bg); }
.kole-select-option.is-selected { background: var(--kole-color-brand-bg); color: var(--kole-color-brand); }
.kole-select-option .check { visibility: hidden; margin-left: auto; }
.kole-select-option.is-selected .check { visibility: visible; }
.kole-select-option.is-disabled { color: var(--kole-color-text-disabled); cursor: not-allowed; }
.kole-select-empty { padding: 16px 12px; text-align: center; color: var(--kole-color-text-placeholder); font-size: 13px; }
</style>
</head>
<body>
frameworks/Table.css
+7
View File
@@ -26,3 +26,10 @@
border-radius: 50%; animation: kole-tbl-spin .6s linear infinite;
}
@keyframes kole-tbl-spin { to { transform: rotate(360deg); } }
/* —— 以下规则自 Table.html 内联样式并入（S9-P7 单一样式真源）—— */
.kole-table th.align-right, .kole-table td.align-right { text-align: right; }
.kole-table .link-btn { color: var(--kole-color-brand); background: none; border: none; cursor: pointer; font-size: 14px; padding: 0; }
.kole-table .link-btn + .link-btn { margin-left: 8px; }
.kole-table .link-btn.danger { color: var(--kole-color-error); }
html.kole-dark .kole-table .loading-mask { background: rgba(20,22,28,0.7); }
frameworks/Table.html
+2 -32
View File
@@ -5,42 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kole UI · Table (H5)</title>
<link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css">
<link rel="stylesheet" href="./Table.css">
<style>
/* 对齐 components.css 与 table.json 契约 */
/* 演示页布局脚手架 —— 组件样式已并入 Table.css（S9-P7 单一样式真源） */
.demo { padding: 24px; background: var(--kole-color-page-bg); color: var(--kole-color-text-body); font-family: var(--font-family); }
h1 { font-size: 20px; margin: 0 0 4px; }
.sub { color: var(--kole-color-text-secondary); margin: 0 0 24px; font-size: 12px; }
.kole-table { width: 100%; border: 1px solid var(--kole-color-border); border-radius: 8px; overflow: hidden; background: var(--kole-color-card-bg); position: relative; }
.kole-table table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--kole-color-text-body); }
.kole-table thead th {
background: var(--kole-color-table-header-bg); color: var(--kole-color-text-body); font-weight: 600; height: 48px; text-align: left;
padding: 0 16px; border-bottom: 1px solid var(--kole-color-border); white-space: nowrap;
}
.kole-table tbody td { height: 48px; padding: 0 16px; border-bottom: 1px solid var(--kole-color-border); text-align: left; }
.kole-table tbody tr:last-child td { border-bottom: none; }
.kole-table tbody tr:hover { background: var(--kole-color-page-bg); }
.kole-table tbody tr.is-selected { background: var(--kole-color-brand-bg); }
.kole-table th.align-right, .kole-table td.align-right { text-align: right; }
.kole-table .sortable { cursor: pointer; user-select: none; }
.kole-table .sort-ind { color: var(--kole-color-text-placeholder); margin-left: 4px; }
.kole-table .sort-ind.active { color: var(--kole-color-brand); }
.kole-table .col-action { text-align: right; }
.kole-table .link-btn { color: var(--kole-color-brand); background: none; border: none; cursor: pointer; font-size: 14px; padding: 0; }
.kole-table .link-btn + .link-btn { margin-left: 8px; }
.kole-table .link-btn.danger { color: var(--kole-color-error); }
.kole-table .checkbox { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }
.kole-table .empty { padding: 48px 16px; text-align: center; color: var(--kole-color-text-placeholder); font-size: 14px; }
.kole-table .loading-mask {
position: absolute; inset: 0; background: rgba(255,255,255,0.7); display: flex;
align-items: center; justify-content: center; z-index: 2;
}
html.kole-dark .kole-table .loading-mask { background: rgba(20,22,28,0.7); }
.kole-table .spinner {
width: 20px; height: 20px; border: 2px solid var(--kole-color-brand); border-top-color: transparent;
border-radius: 50%; animation: kole-tbl-spin .6s linear infinite;
}
@keyframes kole-tbl-spin { to { transform: rotate(360deg); } }
</style>
</head>
<body>
frameworks/Tree.css
+1 -2
View File
@@ -2,8 +2,7 @@
.kole-tree { min-width: 240px; border: 1px solid var(--kole-color-border); border-radius: 8px; padding: 4px; background: var(--kole-color-card-bg); }
.kole-tree-node {
display: flex; align-items: center; gap: 4px; height: 32px; border-radius: 4px;
cursor: pointer; user-select: none; font-size: 14px; color: var(--kole-color-text-body); padding-inline-end: 8px;
}
cursor: pointer; user-select: none; font-size: 14px; color: var(--kole-color-text-body); padding-inline-end: 8px; }
.kole-tree-node:hover { background: var(--kole-color-page-bg); }
.kole-tree-node.is-selected { background: var(--kole-color-brand-bg); color: var(--kole-color-brand); }
.kole-tree-arrow {
frameworks/Tree.html
+2 -17
View File
@@ -5,27 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kole UI · Tree (H5)</title>
<link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css">
<link rel="stylesheet" href="./Tree.css">
<style>
/* 对齐 组件2.txt Tree 规范：节点高32px、缩进16px/级、箭头12px、选中 #F0F5FF/#2F54EB */
/* 演示页布局脚手架 —— 组件样式已并入 Tree.css（S9-P7 单一样式真源） */
.demo { padding: 24px; background: var(--kole-color-page-bg); color: var(--kole-color-text-body); font-family: var(--font-family); }
h1 { font-size: 20px; margin: 0 0 4px; }
.sub { color: var(--kole-color-text-secondary); margin: 0 0 24px; font-size: 12px; }
.kole-tree { min-width: 240px; border: 1px solid var(--kole-color-border); border-radius: 8px; padding: 4px; background: var(--kole-color-card-bg); }
.kole-tree-node {
display: flex; align-items: center; gap: 4px; height: 32px; border-radius: 4px;
cursor: pointer; user-select: none; font-size: 14px; color: var(--kole-color-text-body); padding-right: 8px;
}
.kole-tree-node:hover { background: var(--kole-color-page-bg); }
.kole-tree-node.is-selected { background: var(--kole-color-brand-bg); color: var(--kole-color-brand); }
.kole-tree-arrow {
display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
font-size: 12px; color: var(--kole-color-text-secondary); transition: transform .15s; flex-shrink: 0;
}
.kole-tree-arrow.is-open { transform: rotate(90deg); }
.kole-tree-arrow-placeholder { width: 16px; flex-shrink: 0; }
.kole-tree-check { width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }
.kole-tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
</style>
</head>
<body>
frameworks/TreeTable.html
+2 -17
View File
@@ -5,27 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kole UI · TreeTable (H5)</title>
<link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css">
<link rel="stylesheet" href="./TreeTable.css">
<style>
/* 对齐 组件7.txt TreeTable 规范：层级缩进16px/级、展开箭头、父级汇总、选择联动 */
/* 演示页布局脚手架 —— 组件样式已并入 TreeTable.css（S9-P7 单一样式真源） */
.demo { padding: 24px; background: var(--kole-color-page-bg); color: var(--kole-color-text-body); font-family: var(--font-family); }
h1 { font-size: 20px; margin: 0 0 4px; }
.sub { color: var(--kole-color-text-secondary); margin: 0 0 24px; font-size: 12px; }
.kole-tt { width: 100%; border: 1px solid var(--kole-color-border); border-radius: 8px; overflow: hidden; background: var(--kole-color-card-bg); }
.kole-tt table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--kole-color-text-body); }
.kole-tt thead th { background: var(--kole-color-table-header-bg); color: var(--kole-color-text-body); font-weight: 600; height: 48px; text-align: left; padding: 0 16px; border-bottom: 1px solid var(--kole-color-border); white-space: nowrap; }
.kole-tt tbody td { height: 48px; padding: 0 16px; border-bottom: 1px solid var(--kole-color-border); text-align: left; }
.kole-tt tbody tr:last-child td { border-bottom: none; }
.kole-tt tbody tr:hover { background: var(--kole-color-page-bg); }
.kole-tt tbody tr.is-selected { background: var(--kole-color-brand-bg); }
.kole-tt .align-right { text-align: right; }
.kole-tt .tree-cell { display: flex; align-items: center; gap: 4px; }
.kole-tt .tt-arrow { width: 16px; height: 16px; font-size: 12px; color: var(--kole-color-text-secondary); transition: transform .15s; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kole-tt .tt-arrow.is-open { transform: rotate(90deg); }
.kole-tt .tt-arrow-placeholder { width: 16px; flex-shrink: 0; }
.kole-tt .tt-check { width: 14px; height: 14px; cursor: pointer; }
.kole-tt .tt-summary { color: var(--kole-color-text-secondary); font-size: 12px; margin-left: 6px; }
.kole-tt tfoot td { height: 44px; padding: 0 16px; background: var(--kole-color-table-header-bg); font-weight: 600; border-top: 1px solid var(--kole-color-border); }
</style>
</head>
<body>
frameworks/card.html
+2 -16
View File
@@ -5,27 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kole UI · Card (H5)</title>
<link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css">
<link rel="stylesheet" href="./Card.css">
<style>
/* 对齐 components.css 与 card.json 契约 */
/* 演示页布局脚手架 —— 组件样式已并入 Card.css（S9-P7 单一样式真源） */
.demo { padding: 24px; background: var(--kole-color-page-bg); color: var(--kole-color-text-body); font-family: var(--font-family); }
h1 { font-size: 20px; margin: 0 0 4px; }
.sub { color: var(--kole-color-text-secondary); margin: 0 0 24px; font-size: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.kole-card {
background: var(--kole-color-card-bg); border-radius: 8px; box-sizing: border-box;
min-width: 280px; max-width: 360px;
}
.kole-card--bordered { border: 1px solid var(--kole-color-border); }
.kole-card--shadowed { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.kole-card__header {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
font-weight: 600; color: var(--kole-color-text-title);
}
.kole-card__title { font-size: 16px; }
.kole-card__extra { color: var(--kole-color-brand); font-size: 14px; cursor: pointer; }
.kole-card__body { color: var(--kole-color-text-body); font-size: 14px; line-height: 22px; }
.kole-card__actions { display: flex; justify-content: flex-end; gap: 8px; }
</style>
</head>
<body>