dianshang-qianduan/.trae/skills/teacher-edu-style/references/snippets.md

教师端教育风 · 代码片段

可直接复制。按需取用，不要整页照搬。

1. 页面根类令牌块（放 scoped 顶部）

.xxx-page {
  /* 颜色 */
  --edu-primary: #3b82f6;
  --edu-primary-deep: #2563eb;
  --edu-primary-soft: #eff6ff;
  --text-strong: #1f2937;
  --text-body: #6b7280;
  --text-muted: #9ca3af;
  --border-color: #e5e7eb;

  /* 字号 */
  --fs-page: 17px;
  --fs-card: 14px;
  --fs-body: 12px;
  --fs-tag: 11px;
  --fs-kpi: 26px;
  --fs-num: 20px;

  /* 间距（4px 基准）*/
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;

  /* 圆角 / 控件 */
  --r-card: 12px;
  --r-control: 8px;
  --control-h: 36px;
  --field-w: 200px;
  --btn-pad-x: 16px;
  --btn-icon: 14px;
}

2. 主按钮 outline（页面 scoped 本地强制版）

当全局未接管或需保证单页一定生效时使用：

.search-btn {
  height: var(--control-h);
  padding: 0 var(--btn-pad-x);
  background-color: transparent !important;
  background-image: none !important; /* 关键：清渐变层 */
  border: 1px solid var(--edu-primary) !important;
  color: var(--edu-primary) !important;
  border-radius: var(--r-control) !important;
  box-shadow: none !important;
  font-size: var(--fs-body);
  font-weight: 600;
  gap: var(--sp-2); /* 自定义 SVG 图标间距 */
  transition: background-color 0.18s ease, color 0.18s ease;

  &:hover,
  &:focus {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: var(--edu-primary-deep) !important;
  }

  &:active {
    background-color: rgba(59, 130, 246, 0.18) !important;
    color: var(--edu-primary-deep) !important;
  }

  .btn-svg {
    width: var(--btn-icon);
    height: var(--btn-icon);
    /* SVG 内 fill / stroke 用 currentColor */
  }
}

3. 输入框 / 下拉 / 日期 统一覆盖（teacher-light.scss 通用）

.el-input__wrapper,
.el-select__wrapper {
  height: 36px !important;
  background-color: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 0 0 1px #e5e7eb inset !important;
  padding: 0 11px !important;
  transition: box-shadow 0.18s ease;

  &:hover {
    box-shadow: 0 0 0 1px #d1d5db inset !important;
  }

  &.is-focus,
  &:focus-within {
    box-shadow: 0 0 0 1px #3b82f6 inset,
      0 0 0 3px rgba(59, 130, 246, 0.12) !important;
  }
}

.el-input__inner,
.el-select__selected-item {
  font-size: 12px;
  color: #1f2937;
  -webkit-text-fill-color: #1f2937;
}

.el-input__inner::placeholder {
  color: #9ca3af;
  -webkit-text-fill-color: #9ca3af;
}

4. 卡片

.card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--r-card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: var(--sp-4);

  &-title {
    font-size: var(--fs-card);
    font-weight: 700;
    color: var(--text-strong);
    margin: 0 0 var(--sp-3);
  }
}

5. 走势图 tooltip + axisPointer（ECharts option）

tooltip: {
  trigger: "axis",
  backgroundColor: "rgba(255, 255, 255, 0.98)",
  borderColor: "rgba(59, 130, 246, 0.2)",
  borderWidth: 1,
  padding: [10, 14],
  textStyle: { color: "#1f2937", fontSize: 13 },
  axisPointer: {
    type: "cross",
    lineStyle: { color: "rgba(59,130,246,0.3)", type: "dashed" },
  },
},
xAxis: {
  // ...
  axisPointer: {
    label: {
      backgroundColor: "#2563eb",
      color: "#ffffff",
      fontSize: 11,
      fontWeight: 600,
      padding: [4, 8],
      borderRadius: 4,
    },
  },
},
yAxis: {
  // ...
  axisPointer: {
    label: { backgroundColor: "#2563eb", color: "#ffffff", fontSize: 11 },
  },
},

6. 饼图 tooltip（item 触发）

tooltip: {
  trigger: "item",
  backgroundColor: "rgba(255, 255, 255, 0.98)",
  borderColor: "rgba(59, 130, 246, 0.2)",
  textStyle: { color: "#1f2937", fontSize: 13 },
  formatter: "{b}: {c}人 ({d}%)",
},

7. 页面骨架参考

<div class="xxx-page">
  <!-- 页面标题（app-main 已提供 padding，这里不加）-->
  <header class="page-head">
    <h1 class="page-title">页面标题</h1>
    <p class="page-sub">辅助说明</p>
  </header>

  <!-- KPI 行 -->
  <div class="kpi-row">
    <div class="kpi-card"><!-- 图标 + 标签 + 大数字 --></div>
  </div>

  <!-- 内容区 -->
  <div class="content-grid">
    <section class="card">...</section>
  </div>
</div>

8. 浏览器快速自检脚本（DevTools / browser_evaluate）

const btn = document.querySelector(".search-btn");
const s = getComputedStyle(btn);
({
  backgroundColor: s.backgroundColor, // rgba(0,0,0,0)
  backgroundImage: s.backgroundImage, // 必须 none
  borderColor: s.borderColor,         // rgb(59,130,246)
  color: s.color,                     // rgb(59,130,246)
  height: s.height,                   // 36px
});