root/aurora-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
aurora-admin/frameworks-mobile/Rate.html
T
aurora-admin f1fbfc2ddb
Regression / regression (push) Canceled after 0s
Details
feat(品牌标识): 几何 K 图标(favicon/顶栏标记/theme-color) + 并行会话成果入库 
## 品牌标识（本次会话）

起因：品牌此前没有任何图形标识 —— 唯一 favicon 是内联 data-URI 里的字母「A」，
那是 v2.0.0「Aurora Admin → Kole UI」改名漏掉的一处（PC 顶栏也是「A」，
移动端站已是「K」；移动端文档站则完全没有 favicon）。

- 几何：24 网格三个互不接触的笔画（竖 + 两斜），圆头描边；
  描边 2.25 → 16px 标签页尺寸下正好 1.5px = 规范原文「描边1.5px」
- 取色分两套（刻意）：favicon 硬编码品牌蓝/白（渲染在浏览器标签栏，不继承 kole-dark）；
  顶栏标记走 currentColor（实测暗色下自动转 rgb(20,22,28)）
- 新增 theme-color 双条（light #FFFFFF / dark #1C1F26，取 --kole-color-card-bg）
- 修 site/app.js hero 标语 KOLE ADMIN → KOLE UI（改名变形残留）
- 移动端 7 个模板补 favicon（此前计数 0）

验收：门禁 9 条全 OK（site-routing/site-routes/mobile-docs/mobile-site/isolation/
theme/nav/i18n/icons）；PC 回归 1464/1464 · 移动端 807/807，各连跑 8 次一致；
两端 favicon 405 字节逐字节一致；PC 站控制台错误 1→0。

## 并行会话成果（本次一并入库）

- 图标系统：2576 图标（TDesign/Element Plus，MIT）+ 11 端注入 + 5 个构建门禁工具
  + IconPreview 预览页 + ICON-SPEC.md 冻结规格
- 移动端平台：47 组件 × 6 端 + 文档站 53 页 + 隔离门禁
- PC 组件：103 个大后台组件 / 组件11 批次
- uni-app：PC 端试点 + 移动端端实现 + 真实编译验证

## 工程

- .gitignore 补 .scratch/ 与 .zcode-preexisting-*.txt（会话中间产物，实测 9.1MB，不入库）
- CHANGELOG 补品牌标识条目
- ROADMAP 登 S8-P4（品牌标识任务包 + og:image/apple-touch-icon 未做部分）
2026-09-21 10:05:48 +08:00

307 lines
17 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>Kole UI Mobile · Rate（H5）</title>
<link rel="stylesheet" href="../.design_library/kole-ui-mobile/colors_and_type.css">
<link rel="stylesheet" href="Rate.css">
<style>
body { margin: 0; background: var(--kole-color-page-bg); font-family: var(--kole-font-family); color: var(--kole-color-text-body); }
.demo { max-width: 375px; margin: 0 auto; padding: var(--kole-m-gutter) 0; }
.demo-label { margin: 0; padding: var(--kole-space-12) var(--kole-m-gutter) var(--kole-space-8);
font-size: var(--kole-m-font-size-label); color: var(--kole-color-text-secondary); }
.demo-pad { background: var(--kole-color-card-bg); border-block: 1px solid var(--kole-color-border); }
.demo-block[hidden] { display: none; }
</style>
</head>
<body>
<div class="demo">
<section class="demo-block" data-demo="basic">
<p class="demo-label">基础用法（点第 N 颗即取 N 分；整行 44px 高，星形本体只有 24px）</p>
<div class="demo-pad">
<div class="kole-m-rate" id="rate-basic" role="radiogroup" aria-label="商品评分"
data-score="4" data-max="5" data-assert="rate-basic">
<span class="kole-m-rate__stars">
<button class="kole-m-rate__star" type="button" role="radio" aria-checked="true" aria-label="1 星"
data-behavior="click-sets-attr:#rate-basic|data-score|1">
<span class="kole-m-rate__glyph" aria-hidden="true">
<span class="kole-m-rate__base">★</span>
<span class="kole-m-rate__fill" style="width: 100%">★</span>
</span>
</button>
<button class="kole-m-rate__star" type="button" role="radio" aria-checked="true" aria-label="2 星">
<span class="kole-m-rate__glyph" aria-hidden="true">
<span class="kole-m-rate__base">★</span>
<span class="kole-m-rate__fill" style="width: 100%">★</span>
</span>
</button>
<button class="kole-m-rate__star" type="button" role="radio" aria-checked="true" aria-label="3 星">
<span class="kole-m-rate__glyph" aria-hidden="true">
<span class="kole-m-rate__base">★</span>
<span class="kole-m-rate__fill" style="width: 100%">★</span>
</span>
</button>
<button class="kole-m-rate__star" type="button" role="radio" aria-checked="true" aria-label="4 星">
<span class="kole-m-rate__glyph" aria-hidden="true">
<span class="kole-m-rate__base">★</span>
<span class="kole-m-rate__fill" style="width: 100%">★</span>
</span>
</button>
<button class="kole-m-rate__star" type="button" role="radio" aria-checked="false" aria-label="5 星">
<span class="kole-m-rate__glyph" aria-hidden="true">
<span class="kole-m-rate__base">★</span>
<span class="kole-m-rate__fill" style="width: 0%">★</span>
</span>
</button>
</span>
<span class="kole-m-rate__text" aria-live="polite">4 分</span>
</div>
</div>
</section>
<section class="demo-block" data-demo="half">
<p class="demo-label">半星（allowHalf=true：点某颗星的左半取 N-0.5 分、右半取 N 分 —— 规则写进规格 §36.5）</p>
<div class="demo-pad">
<div class="kole-m-rate kole-m-rate--half" id="rate-half" role="radiogroup" aria-label="物流评分"
data-score="3.5" data-max="5" data-half="true" data-assert="rate-half">
<span class="kole-m-rate__stars">
<button class="kole-m-rate__star" type="button" role="radio" aria-checked="true" aria-label="1 星">
<span class="kole-m-rate__glyph" aria-hidden="true">
<span class="kole-m-rate__base">★</span>
<span class="kole-m-rate__fill" style="width: 100%">★</span>
</span>
<span class="kole-m-rate__half kole-m-rate__half--left" data-half="left"></span>
<span class="kole-m-rate__half kole-m-rate__half--right" data-half="right"></span>
</button>
<button class="kole-m-rate__star" type="button" role="radio" aria-checked="true" aria-label="2 星">
<span class="kole-m-rate__glyph" aria-hidden="true">
<span class="kole-m-rate__base">★</span>
<span class="kole-m-rate__fill" style="width: 100%">★</span>
</span>
<span class="kole-m-rate__half kole-m-rate__half--left" data-half="left"></span>
<span class="kole-m-rate__half kole-m-rate__half--right" data-half="right"></span>
</button>
<button class="kole-m-rate__star" type="button" role="radio" aria-checked="true" aria-label="3 星">
<span class="kole-m-rate__glyph" aria-hidden="true">
<span class="kole-m-rate__base">★</span>
<span class="kole-m-rate__fill" style="width: 100%">★</span>
</span>
<span class="kole-m-rate__half kole-m-rate__half--left" data-half="left"></span>
<span class="kole-m-rate__half kole-m-rate__half--right" data-half="right"></span>
</button>
<button class="kole-m-rate__star" type="button" role="radio" aria-checked="true" aria-label="3.5 星">
<span class="kole-m-rate__glyph" aria-hidden="true">
<span class="kole-m-rate__base">★</span>
<span class="kole-m-rate__fill" style="width: 50%">★</span>
</span>
<span class="kole-m-rate__half kole-m-rate__half--left" data-half="left"></span>
<span class="kole-m-rate__half kole-m-rate__half--right" data-half="right"></span>
</button>
<button class="kole-m-rate__star" type="button" role="radio" aria-checked="false" aria-label="5 星">
<span class="kole-m-rate__glyph" aria-hidden="true">
<span class="kole-m-rate__base">★</span>
<span class="kole-m-rate__fill" style="width: 0%">★</span>
</span>
<span class="kole-m-rate__half kole-m-rate__half--left" data-half="left"
data-behavior="click-sets-attr:#rate-half|data-score|4.5"></span>
<span class="kole-m-rate__half kole-m-rate__half--right" data-half="right"></span>
</button>
</span>
<span class="kole-m-rate__text" aria-live="polite">3.5 分</span>
</div>
</div>
</section>
<section class="demo-block" data-demo="readonly">
<p class="demo-label">只读展示（readonly=true：用于列表里展示已有评分，星形不再是按钮、点击不改值）</p>
<div class="demo-pad">
<div class="kole-m-rate kole-m-rate--readonly" role="img" aria-label="评分 4.5 分（满分 5 分）" data-assert="rate-readonly">
<span class="kole-m-rate__stars" aria-hidden="true">
<span class="kole-m-rate__star">
<span class="kole-m-rate__glyph"><span class="kole-m-rate__base">★</span><span class="kole-m-rate__fill" style="width: 100%">★</span></span>
</span>
<span class="kole-m-rate__star">
<span class="kole-m-rate__glyph"><span class="kole-m-rate__base">★</span><span class="kole-m-rate__fill" style="width: 100%">★</span></span>
</span>
<span class="kole-m-rate__star">
<span class="kole-m-rate__glyph"><span class="kole-m-rate__base">★</span><span class="kole-m-rate__fill" style="width: 100%">★</span></span>
</span>
<span class="kole-m-rate__star">
<span class="kole-m-rate__glyph"><span class="kole-m-rate__base">★</span><span class="kole-m-rate__fill" style="width: 100%">★</span></span>
</span>
<span class="kole-m-rate__star">
<span class="kole-m-rate__glyph"><span class="kole-m-rate__base">★</span><span class="kole-m-rate__fill" style="width: 50%">★</span></span>
</span>
</span>
<span class="kole-m-rate__text">4.5 分 · 共 128 条评价</span>
</div>
</div>
</section>
<section class="demo-block" data-demo="size">
<p class="demo-label">尺寸两档（size=small 星形 18px，用于行内展示；default 24px 用于可评分场景）</p>
<div class="demo-pad" data-assert="rate-size">
<div class="kole-m-rate kole-m-rate--small kole-m-rate--readonly" role="img" aria-label="评分 3 分（满分 5 分）">
<span class="kole-m-rate__stars" aria-hidden="true">
<span class="kole-m-rate__star">
<span class="kole-m-rate__glyph"><span class="kole-m-rate__base">★</span><span class="kole-m-rate__fill" style="width: 100%">★</span></span>
</span>
<span class="kole-m-rate__star">
<span class="kole-m-rate__glyph"><span class="kole-m-rate__base">★</span><span class="kole-m-rate__fill" style="width: 100%">★</span></span>
</span>
<span class="kole-m-rate__star">
<span class="kole-m-rate__glyph"><span class="kole-m-rate__base">★</span><span class="kole-m-rate__fill" style="width: 100%">★</span></span>
</span>
<span class="kole-m-rate__star">
<span class="kole-m-rate__glyph"><span class="kole-m-rate__base">★</span><span class="kole-m-rate__fill" style="width: 0%">★</span></span>
</span>
<span class="kole-m-rate__star">
<span class="kole-m-rate__glyph"><span class="kole-m-rate__base">★</span><span class="kole-m-rate__fill" style="width: 0%">★</span></span>
</span>
</span>
<span class="kole-m-rate__text">small（18px）</span>
</div>
<div class="kole-m-rate kole-m-rate--readonly" role="img" aria-label="评分 3 分（满分 5 分）">
<span class="kole-m-rate__stars" aria-hidden="true">
<span class="kole-m-rate__star">
<span class="kole-m-rate__glyph"><span class="kole-m-rate__base">★</span><span class="kole-m-rate__fill" style="width: 100%">★</span></span>
</span>
<span class="kole-m-rate__star">
<span class="kole-m-rate__glyph"><span class="kole-m-rate__base">★</span><span class="kole-m-rate__fill" style="width: 100%">★</span></span>
</span>
<span class="kole-m-rate__star">
<span class="kole-m-rate__glyph"><span class="kole-m-rate__base">★</span><span class="kole-m-rate__fill" style="width: 100%">★</span></span>
</span>
<span class="kole-m-rate__star">
<span class="kole-m-rate__glyph"><span class="kole-m-rate__base">★</span><span class="kole-m-rate__fill" style="width: 0%">★</span></span>
</span>
<span class="kole-m-rate__star">
<span class="kole-m-rate__glyph"><span class="kole-m-rate__base">★</span><span class="kole-m-rate__fill" style="width: 0%">★</span></span>
</span>
</span>
<span class="kole-m-rate__text">default（24px）</span>
</div>
</div>
</section>
<section class="demo-block" data-demo="disabled">
<p class="demo-label">禁用（整条置灰且不可聚焦：读屏会播报不可用，点击不改值）</p>
<div class="demo-pad">
<div class="kole-m-rate is-disabled" role="radiogroup" aria-label="满意度评分" aria-disabled="true"
data-score="2" data-max="5" data-assert="rate-disabled">
<span class="kole-m-rate__stars">
<button class="kole-m-rate__star" type="button" role="radio" aria-checked="true" aria-label="1 星" disabled>
<span class="kole-m-rate__glyph" aria-hidden="true">
<span class="kole-m-rate__base">★</span>
<span class="kole-m-rate__fill" style="width: 100%">★</span>
</span>
</button>
<button class="kole-m-rate__star" type="button" role="radio" aria-checked="true" aria-label="2 星" disabled>
<span class="kole-m-rate__glyph" aria-hidden="true">
<span class="kole-m-rate__base">★</span>
<span class="kole-m-rate__fill" style="width: 100%">★</span>
</span>
</button>
<button class="kole-m-rate__star" type="button" role="radio" aria-checked="false" aria-label="3 星" disabled>
<span class="kole-m-rate__glyph" aria-hidden="true">
<span class="kole-m-rate__base">★</span>
<span class="kole-m-rate__fill" style="width: 0%">★</span>
</span>
</button>
<button class="kole-m-rate__star" type="button" role="radio" aria-checked="false" aria-label="4 星" disabled>
<span class="kole-m-rate__glyph" aria-hidden="true">
<span class="kole-m-rate__base">★</span>
<span class="kole-m-rate__fill" style="width: 0%">★</span>
</span>
</button>
<button class="kole-m-rate__star" type="button" role="radio" aria-checked="false" aria-label="5 星" disabled>
<span class="kole-m-rate__glyph" aria-hidden="true">
<span class="kole-m-rate__base">★</span>
<span class="kole-m-rate__fill" style="width: 0%">★</span>
</span>
</button>
</span>
<span class="kole-m-rate__text" aria-live="polite">2 分</span>
</div>
</div>
</section>
</div>
<script>
/* 演示页脚本：真实评分。
半星规则（写进规格 §36.5）：allowHalf=true 时，点第 N 颗星的**左半**取 N-0.5 分、右半取 N 分；
整星模式（默认）下点击位置不影响取值，一律取 N。
每次改值重算每颗星的填充比例（0% / 50% / 100%），并同步 aria-checked 与右侧文案。
真实业务里这份状态由宿主管理（受控 value + change 事件），此处是最小可运行实现。 */
(function () {
function scoreOf(root) {
return Number(root.getAttribute('data-score') || 0);
}
function render(root) {
var score = scoreOf(root);
var stars = root.querySelectorAll('.kole-m-rate__star');
Array.prototype.forEach.call(stars, function (star, i) {
var ratio = Math.max(0, Math.min(1, score - i));
var fill = star.querySelector('.kole-m-rate__fill');
if (fill) fill.style.width = (ratio * 100) + '%';
star.setAttribute('aria-checked', ratio >= 1 ? 'true' : 'false');
});
var text = root.querySelector('.kole-m-rate__text');
if (text) text.textContent = score + ' 分';
}
Array.prototype.forEach.call(document.querySelectorAll('.kole-m-rate'), function (root) {
if (root.classList.contains('is-disabled') || root.classList.contains('kole-m-rate--readonly')) return;
if (root.getAttribute('aria-disabled') === 'true') return;
var half = root.getAttribute('data-half') === 'true' || root.classList.contains('kole-m-rate--half');
root.addEventListener('click', function (e) {
var star = e.target.closest ? e.target.closest('.kole-m-rate__star') : null;
if (!star || !root.contains(star)) return;
var stars = Array.prototype.slice.call(root.querySelectorAll('.kole-m-rate__star'));
var index = stars.indexOf(star) + 1; /* 第 N 颗（1 起） */
if (!index) return;
var halfEl = e.target.closest ? e.target.closest('.kole-m-rate__half') : null;
var isLeftHalf = half && halfEl && halfEl.getAttribute('data-half') === 'left';
root.setAttribute('data-score', String(isLeftHalf ? index - 0.5 : index));
render(root);
});
/* 键盘：左右方向键整星步进（半星模式下是 0.5） */
root.addEventListener('keydown', function (e) {
var delta = e.key === 'ArrowLeft' || e.key === 'ArrowDown' ? -1 : e.key === 'ArrowRight' || e.key === 'ArrowUp' ? 1 : 0;
if (!delta) return;
e.preventDefault();
var max = Number(root.getAttribute('data-max') || 5);
var min = half ? 0.5 : 1;
var next = Math.round((scoreOf(root) + delta * (half ? 0.5 : 1)) * 2) / 2;
root.setAttribute('data-score', String(Math.max(min, Math.min(max, next))));
render(root);
});
});
})();
</script>
<script>
/* ?demo=<id> → 只显示该演示块（文档站按块预览用；无参数时全部显示，测试与回归走无参数路径） */
(function () {
var id = new URLSearchParams(location.search).get('demo');
if (!id) return;
var blocks = Array.prototype.slice.call(document.querySelectorAll('.demo-block'));
var hit = false;
blocks.forEach(function (b) {
var on = b.getAttribute('data-demo') === id;
if (on) hit = true;
b.hidden = !on;
});
if (!hit) { blocks.forEach(function (b) { b.hidden = false; }); return; }
document.body.classList.add('demo-single');
blocks.forEach(function (b) {
var label = b.querySelector('.demo-label');
if (label && !b.hidden) label.hidden = true;
});
})();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink