kn-es-features 1.0.0

package/src/style.css

@@ -0,0 +1,412 @@
+/* ─── CSS Custom Properties ─────────────────────────────────────── */
+:root {
+  --c-bg:           #f2f2f7;
+  --c-surface:      #ffffff;
+  --c-surface-2:    #f9f9fb;
+  --c-pass:         #30d158;
+  --c-pass-bg:      #f0fdf4;
+  --c-fail:         #ff453a;
+  --c-fail-bg:      #fff5f5;
+  --c-accent:       #007aff;
+  --c-accent-dark:  #0055d4;
+  --c-text:         #1c1c1e;
+  --c-text-2:       #3c3c43;
+  --c-text-3:       #8e8e93;
+  --c-border:       #e5e5ea;
+  --c-shadow:       0 1px 3px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
+  --radius:         12px;
+  --radius-sm:      8px;
+  --radius-xs:      5px;
+  --font:           -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
+                    'Helvetica Neue', sans-serif;
+  --mono:           'SF Mono', 'Fira Code', 'Fira Mono', Menlo, monospace;
+}
+
+/* ─── Reset ─────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family:      var(--font);
+  background:       var(--c-bg);
+  color:            var(--c-text);
+  font-size:        14px;
+  line-height:      1.5;
+  min-height:       100vh;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ─── App container ─────────────────────────────────────────────── */
+.app {
+  max-width:  860px;
+  margin:     0 auto;
+  padding:    0 16px 64px;
+}
+
+/* ─── Header ────────────────────────────────────────────────────── */
+.header {
+  display:         flex;
+  align-items:     center;
+  justify-content: space-between;
+  padding:         24px 0 20px;
+}
+
+.header__brand {
+  display:     flex;
+  align-items: center;
+  gap:         12px;
+}
+
+.header__logo {
+  display:         flex;
+  align-items:     center;
+  justify-content: center;
+  width:           36px;
+  height:          36px;
+  border-radius:   10px;
+  background:      linear-gradient(135deg, #007aff 0%, #5856d6 100%);
+  color:           #fff;
+  font-size:       13px;
+  font-weight:     800;
+  letter-spacing:  -0.03em;
+}
+
+.header__title {
+  font-size:   20px;
+  font-weight: 600;
+  color:       var(--c-text);
+}
+
+/* ─── Run button ────────────────────────────────────────────────── */
+.btn-run {
+  display:         flex;
+  align-items:     center;
+  gap:             6px;
+  padding:         9px 20px;
+  border:          none;
+  border-radius:   100px;
+  background:      var(--c-accent);
+  color:           #fff;
+  font-family:     var(--font);
+  font-size:       14px;
+  font-weight:     500;
+  cursor:          pointer;
+  transition:      background .15s, transform .1s, opacity .15s;
+  outline:         none;
+}
+
+.btn-run:hover  { background: var(--c-accent-dark); }
+.btn-run:active { transform: scale(.97); }
+
+.btn-run--running,
+.btn-run:disabled {
+  opacity: .55;
+  cursor:  not-allowed;
+}
+
+.btn-run__icon {
+  font-size: 12px;
+  line-height: 1;
+}
+
+/* ─── Summary bar ───────────────────────────────────────────────── */
+.summary {
+  display:       flex;
+  align-items:   center;
+  background:    var(--c-surface);
+  border-radius: var(--radius);
+  box-shadow:    var(--c-shadow);
+  padding:       0;
+  margin-bottom: 14px;
+  overflow:      hidden;
+}
+
+.summary__group {
+  flex:           1;
+  display:        flex;
+  flex-direction: column;
+  align-items:    center;
+  gap:            2px;
+  padding:        14px 12px;
+}
+
+.summary__divider {
+  width:      1px;
+  height:     36px;
+  background: var(--c-border);
+  flex-shrink: 0;
+}
+
+.summary__label {
+  font-size:      11px;
+  font-weight:    500;
+  color:          var(--c-text-3);
+  text-transform: uppercase;
+  letter-spacing: .06em;
+}
+
+.summary__value {
+  font-size:            20px;
+  font-weight:          600;
+  color:                var(--c-text-2);
+  font-variant-numeric: tabular-nums;
+  transition:           color .2s;
+}
+
+.summary__value--pass { color: var(--c-pass); }
+.summary__value--fail { color: var(--c-fail); }
+
+/* ─── Tabs ──────────────────────────────────────────────────────── */
+.tabs {
+  display:       flex;
+  gap:           8px;
+  margin-bottom: 14px;
+}
+
+.tab {
+  flex:            1;
+  display:         flex;
+  align-items:     center;
+  justify-content: center;
+  gap:             8px;
+  padding:         10px 16px;
+  border:          none;
+  border-radius:   var(--radius-sm);
+  background:      var(--c-surface);
+  color:           var(--c-text-3);
+  font-family:     var(--font);
+  font-size:       14px;
+  font-weight:     500;
+  cursor:          pointer;
+  box-shadow:      var(--c-shadow);
+  transition:      background .15s, color .15s, box-shadow .15s;
+  outline:         none;
+}
+
+.tab:hover {
+  background: var(--c-surface-2);
+  color:      var(--c-text);
+}
+
+.tab--active {
+  background: var(--c-accent);
+  color:      #fff;
+  box-shadow: 0 2px 10px rgba(0,122,255,.3);
+}
+
+.tab--active:hover { background: var(--c-accent-dark); }
+
+.tab__badge {
+  display:         inline-flex;
+  align-items:     center;
+  justify-content: center;
+  min-width:       22px;
+  padding:         1px 6px;
+  border-radius:   100px;
+  font-size:       11px;
+  font-weight:     600;
+  background:      rgba(0,0,0,.1);
+  color:           inherit;
+  transition:      background .15s;
+}
+
+.tab--active .tab__badge            { background: rgba(255,255,255,.25); }
+.tab__badge--pass                   { background: var(--c-pass-bg); color: var(--c-pass); }
+.tab__badge--fail                   { background: var(--c-fail-bg); color: var(--c-fail); }
+.tab--active .tab__badge--pass      { background: rgba(255,255,255,.25); color: #fff; }
+.tab--active .tab__badge--fail      { background: rgba(255,255,255,.25); color: #fff; }
+
+/* ─── Panels ────────────────────────────────────────────────────── */
+.panel { display: none; }
+.panel--active { display: block; }
+
+/* ─── Placeholder ───────────────────────────────────────────────── */
+.placeholder {
+  display:         flex;
+  flex-direction:  column;
+  align-items:     center;
+  justify-content: center;
+  gap:             12px;
+  padding:         72px 0;
+}
+
+.placeholder__icon {
+  font-size:  36px;
+  opacity:    .3;
+}
+
+.placeholder__text {
+  font-size: 14px;
+  color:     var(--c-text-3);
+}
+
+/* ─── Loader ────────────────────────────────────────────────────── */
+.loader {
+  display:         flex;
+  align-items:     center;
+  justify-content: center;
+  gap:             10px;
+  padding:         60px 0;
+  color:           var(--c-text-3);
+  font-size:       14px;
+}
+
+.loader__spinner {
+  width:        18px;
+  height:       18px;
+  border:       2px solid var(--c-border);
+  border-top-color: var(--c-accent);
+  border-radius:    50%;
+  animation:    spin .7s linear infinite;
+  flex-shrink:  0;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ─── Suite card ────────────────────────────────────────────────── */
+.suite {
+  background:    var(--c-surface);
+  border-radius: var(--radius);
+  box-shadow:    var(--c-shadow);
+  margin-bottom: 10px;
+  overflow:      hidden;
+}
+
+.suite__header {
+  display:         flex;
+  align-items:     center;
+  justify-content: space-between;
+  padding:         11px 14px;
+  cursor:          pointer;
+  user-select:     none;
+  transition:      background .12s;
+}
+
+.suite__header:hover { background: var(--c-surface-2); }
+
+.suite__header-left {
+  display:     flex;
+  align-items: center;
+  gap:         10px;
+}
+
+.suite__indicator {
+  width:        3px;
+  height:       16px;
+  border-radius: 2px;
+  flex-shrink:  0;
+}
+
+.suite__indicator--pass { background: var(--c-pass); }
+.suite__indicator--fail { background: var(--c-fail); }
+
+.suite__name {
+  font-size:   14px;
+  font-weight: 600;
+  color:       var(--c-text);
+}
+
+.suite__header-right {
+  display:     flex;
+  align-items: center;
+  gap:         10px;
+}
+
+.suite__stat {
+  font-size:   12px;
+  font-weight: 600;
+  padding:     2px 9px;
+  border-radius: 100px;
+}
+
+.suite__stat--pass { background: var(--c-pass-bg); color: var(--c-pass); }
+.suite__stat--fail { background: var(--c-fail-bg); color: var(--c-fail); }
+
+.suite__chevron {
+  font-size:  11px;
+  color:      var(--c-text-3);
+  transition: transform .2s;
+  line-height: 1;
+}
+
+.suite--collapsed .suite__chevron { transform: rotate(-90deg); }
+
+/* ─── Cases list ─────────────────────────────────────────────────── */
+.suite__cases {
+  list-style:   none;
+  border-top:   1px solid var(--c-border);
+}
+
+.suite--collapsed .suite__cases { display: none; }
+
+.case {
+  display:     flex;
+  align-items: flex-start;
+  gap:         10px;
+  padding:     8px 14px 8px 18px;
+}
+
+.case + .case { border-top: 1px solid var(--c-border); }
+
+.case__icon {
+  font-size:    11px;
+  font-weight:  700;
+  line-height:  1.8;
+  flex-shrink:  0;
+  width:        14px;
+  text-align:   center;
+}
+
+.case--pass .case__icon { color: var(--c-pass); }
+.case--fail .case__icon { color: var(--c-fail); }
+
+.case__body {
+  display:        flex;
+  flex-direction: column;
+  gap:            3px;
+  flex:           1;
+  min-width:      0;
+}
+
+.case__name {
+  font-size: 13px;
+  color:     var(--c-text-2);
+}
+
+.case--fail .case__name { color: var(--c-text); font-weight: 500; }
+
+.case__error {
+  display:      inline-block;
+  font-family:  var(--mono);
+  font-size:    11px;
+  color:        var(--c-fail);
+  background:   var(--c-fail-bg);
+  padding:      2px 7px;
+  border-radius: var(--radius-xs);
+  border-left:  2px solid var(--c-fail);
+  word-break:   break-all;
+  line-height:  1.5;
+}
+
+/* ─── Responsive ─────────────────────────────────────────────────── */
+
+/* summary 5 列时收窄内间距 */
+@media (max-width: 760px) {
+  .summary__group  { padding: 12px 6px; }
+  .summary__label  { font-size: 10px; }
+  .summary__value  { font-size: 16px; }
+}
+
+/* 4 个 tab 在小屏折成 2×2 */
+@media (max-width: 520px) {
+  .tabs { flex-wrap: wrap; }
+  .tab  { flex: 1 1 calc(50% - 4px); }
+}
+
+@media (max-width: 600px) {
+  .app             { padding: 0 12px 48px; }
+  .header__title   { font-size: 17px; }
+  .header__logo    { width: 30px; height: 30px; font-size: 11px; }
+  .btn-run         { padding: 8px 16px; font-size: 13px; }
+}

package/src/utils/runner.js

@@ -0,0 +1,55 @@
+/**
+ * 创建测试用例运行器
+ * @param {string} suiteName - 测试套件名称
+ * @returns {{ test, getResults }}
+ */
+export function createSuite(suiteName) {
+  const results = []
+
+  function test(caseName, fn) {
+    try {
+      const result = fn()
+      if (result instanceof Promise) {
+        return result
+          .then(() => {
+            results.push({ suite: suiteName, case: caseName, status: 'pass' })
+          })
+          .catch((err) => {
+            results.push({ suite: suiteName, case: caseName, status: 'fail', error: err.message })
+          })
+      }
+      results.push({ suite: suiteName, case: caseName, status: 'pass' })
+    } catch (err) {
+      results.push({ suite: suiteName, case: caseName, status: 'fail', error: err.message })
+    }
+  }
+
+  function assert(condition, msg) {
+    if (!condition) throw new Error(msg || '断言失败')
+  }
+
+  function getResults() {
+    return results
+  }
+
+  return { test, assert, getResults }
+}
+
+/**
+ * 打印测试结果到控制台
+ * @param {Array} results
+ */
+export function printResults(results) {
+  let pass = 0
+  let fail = 0
+  results.forEach((r) => {
+    if (r.status === 'pass') {
+      pass++
+      console.log(`  ✓ [${r.suite}] ${r.case}`)
+    } else {
+      fail++
+      console.error(`  ✗ [${r.suite}] ${r.case} — ${r.error}`)
+    }
+  })
+  console.log(`\n共 ${results.length} 项，通过 ${pass}，失败 ${fail}`)
+}