UI设计规范及说明

Appearance

表格 ​

大屏数据表格组件，用于展示结构化数据。

CSS样式 ​

全部 table 样式代码：

查看代码
css
/* 大屏组件全局 CSS 变量 */

:root {
  /* ==================== 主题色 ==================== */
  --hn-color-primary: #439FFF;              /* 品牌色 */

  /* ==================== 辅助色 ==================== */
  --hn-color-auxiliary-blue: #00EEFF;       /* 海天蓝 */
  --hn-color-auxiliary-cyan: #00FFB7;       /* 炫丽青 */
  --hn-color-auxiliary-purple: #AA00FF;     /* 神秘紫 */

  /* ==================== 文字颜色 ==================== */
  --hn-color-text-white: #FFFFFF;           /* 闪亮白 */
  --hn-color-text-gray: #A3C0E5;            /* 朦胧灰 */

  /* ==================== 告警颜色 ==================== */
  --hn-color-success: #00FF4D;              /* 成功绿 */
  --hn-color-link: #247BFF;                 /* 超链蓝 */
  --hn-color-warning: #FFC300;              /* 警告黄 */
  --hn-color-danger: #FF1F47;               /* 危险红 */

  /* ==================== 渐变色 ==================== */
  /* 品牌色渐变01 */
  --hn-gradient-brand-start: #A1CFFF;
  --hn-gradient-brand-end: #439FFF;
  --hn-gradient-brand: linear-gradient(90deg, #A1CFFF 0%, #439FFF 100%);

  /* 蓝色渐变02 */
  --hn-gradient-blue-start: #7FB2FF;
  --hn-gradient-blue-end: #0066FF;
  --hn-gradient-blue: linear-gradient(90deg, #7FB2FF 0%, #0066FF 100%);

  /* 红色渐变03 */
  --hn-gradient-red-start: #E98197;
  --hn-gradient-red-end: #E98197;
  --hn-gradient-red: linear-gradient(90deg, #E98197 0%, #E98197 100%);

  /* 蓝青色渐变04 */
  --hn-gradient-cyan-start: #00D4FF;
  --hn-gradient-cyan-end: #00FFB7;
  --hn-gradient-cyan: linear-gradient(90deg, #00D4FF 0%, #00FFB7 100%);

  /* 警告渐变05 */
  --hn-gradient-warning-start: #FFE799;
  --hn-gradient-warning-end: #FFC300;
  --hn-gradient-warning: linear-gradient(90deg, #FFE799 0%, #FFC300 100%);

  /* 绿色渐变06 */
  --hn-gradient-green-start: #8CF7B7;
  --hn-gradient-green-end: #00FF4D;
  --hn-gradient-green: linear-gradient(90deg, #8CF7B7 0%, #00FF4D 100%);

  /* 白色渐变07 */
  --hn-gradient-white-start: #FFFFFF;
  --hn-gradient-white-end: #A3C0E5;
  --hn-gradient-white: linear-gradient(90deg, #FFFFFF 0%, #A3C0E5 100%);

  /* 紫色渐变08 */
  --hn-gradient-purple-start: #D47FFF;
  --hn-gradient-purple-end: #AA00FF;
  --hn-gradient-purple: linear-gradient(90deg, #D47FFF 0%, #AA00FF 100%);

  /* ==================== 背景色 ==================== */
  --hn-bg-center: #072652;                  /* 径向渐变中心 */
  --hn-bg-edge: #00102A;                    /* 径向渐变边缘 */
  --hn-bg-radial: radial-gradient(60% 60% at 50% 50%, #072652 0%, #00102A 100%), #D8D8D8;
  --hn-bg-radial-center: linear-gradient(0deg, #072652, #072652), #D8D8D8;;
  --hn-bg-radial-edge: linear-gradient(0deg, #00102A, #00102A), #D8D8D8;

  /* ==================== 品牌梯度色 ==================== */
  --hn-brand-level-1: #72B7FF;
  --hn-brand-level-2: #439FFF;
  --hn-brand-level-3: #1377FF;
  --hn-brand-level-4: #133EF1;
  --hn-brand-level-5: #000BDA;

  /* ==================== 白色梯度色（文字） ==================== */
  --hn-text-level-1: #FFFFFF;
  --hn-text-level-2: #D8E4F4;
  --hn-text-level-3: #A3C0E5;
  --hn-text-level-4: #759DCF;
  --hn-text-level-5: #426FA9;

  /* ==================== 字体家族 ==================== */
  --hn-font-family-title: 'DouYuZhuiGuangTi', sans-serif;   /* 斗鱼追光体 - 头部标题 */
  --hn-font-family-cn: 'Source Han Sans CN', 'Noto Sans SC', sans-serif;  /* 思源黑体 - 中文 */
  --hn-font-family-num: 'D-DIN', 'DIN Alternate', sans-serif;  /* D-DIN - 数值/英文 */

  /* ==================== 字号 ==================== */
  --hn-font-size-h1: 28px;       /* 头部标题栏 */
  --hn-font-size-h2: 16px;       /* 标题 */
  --hn-font-size-h3: 14px;       /* 小标题、按钮文字 */
  --hn-font-size-body: 14px;     /* 正文 */
  --hn-font-size-caption: 12px;  /* 辅助文字 */
  --hn-font-size-num-lg: 32px;   /* 大数值 */
  --hn-font-size-num-md: 16px;   /* 中数值 */
  --hn-font-size-num-sm: 14px;   /* 小数值 */
  --hn-font-size-num-xs: 12px;   /* 超小数值 */

  /* ==================== 字重 ==================== */
  --hn-font-weight-regular: 400;
  --hn-font-weight-medium: 500;
  --hn-font-weight-bold: 700;
}
css

/* 表格基础样式 */
.hn-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--hn-font-family-cn);
  font-size: var(--hn-font-size-body);
}

/* 表头 */
.hn-table thead {
  background: #072652 !important;
  box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.06);
}

.hn-table thead tr,
.hn-table thead th {
  background: #072652 !important;
  border-color: rgba(67, 159, 255, 0.2) !important;
}

.hn-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-weight: var(--hn-font-weight-medium);
  color: var(--hn-color-text-gray);
  border-bottom: 1px solid rgba(67, 159, 255, 0.2);
  white-space: nowrap;
}

/* 表格行 */
.hn-table tbody tr {
  background: transparent;
  transition: background-color 0.2s ease;
  border-color: rgba(67, 159, 255, 0.2) !important;
}

.hn-table tbody tr:hover {
  background: rgba(67, 159, 255, 0.08);
}

.hn-table tbody tr.selected {
  background: rgba(67, 159, 255, 0.12);
}

/* 表格单元格 */
.hn-table td {
  padding: 12px 16px;
  color: var(--hn-color-text-white);
  border-bottom: 1px solid rgba(67, 159, 255, 0.2);
  border-color: rgba(67, 159, 255, 0.2) !important;
}

/* 复选框列 */
.hn-table-checkbox {
  width: 48px;
  text-align: center;
}

.hn-table-checkbox input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(67, 159, 255, 0.5);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
}

.hn-table-checkbox input[type='checkbox']:hover {
  border-color: var(--hn-color-primary);
}

.hn-table-checkbox input[type='checkbox']:checked {
  background: var(--hn-color-primary);
  border-color: var(--hn-color-primary);
}

.hn-table-checkbox input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 状态指示器 */
.hn-table-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hn-table-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hn-table-status.online::before {
  background: var(--hn-color-success);
  box-shadow: 0 0 6px var(--hn-color-success);
}

.hn-table-status.error::before {
  background: var(--hn-color-warning);
  box-shadow: 0 0 6px var(--hn-color-warning);
}

.hn-table-status.offline::before {
  background: var(--hn-color-text-gray);
}

/* 操作按钮 */
.hn-table-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hn-table-action {
  color: var(--hn-color-primary);
  cursor: pointer;
  font-size: var(--hn-font-size-body);
  background: none;
  border: none;
  padding: 0;
  transition: color 0.2s ease;
}

.hn-table-action:hover {
  color: var(--hn-color-auxiliary-blue);
}

.hn-table-action.danger {
  color: var(--hn-color-danger);
}

.hn-table-action.danger:hover {
  color: #ff4d6a;
}

.hn-table-action.more {
  color: var(--hn-color-text-gray);
  letter-spacing: 2px;
}

/* 时间列 - 使用等宽数字字体 */
.hn-table-time {
  font-family: var(--hn-font-family-num);
  color: var(--hn-color-text-gray);
}

带选择框表格 ​

支持单选和全选功能，选中行有高亮效果。

带选择框表格
应用名称状态创建时间操作
应用名称 1已上线2020-01-04 09:41:00
应用名称 2异常2020-01-04 09:41:00
应用名称 3未上线2020-01-04 09:41:00
应用名称 4未上线2020-01-04 09:41:00
应用名称 5未上线2020-01-04 09:41:00
应用名称 6未上线2020-01-04 09:41:00
查看代码
vue
<table class="hn-table">
  <thead>
    <tr>
      <th class="hn-table-checkbox">
        <input
          type="checkbox"
          v-model="allChecked"
          :indeterminate="indeterminate"
        />
      </th>
      <th>应用名称</th>
      <th>状态</th>
      <th>创建时间</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr
      v-for="row in tableData"
      :key="row.id"
      :class="{ selected: row.checked }"
    >
      <td class="hn-table-checkbox">
        <input type="checkbox" v-model="row.checked" />
      </td>
      <td>{{ row.name }}</td>
      <td>
        <span class="hn-table-status" :class="row.status">{{
          row.statusText
        }}</span>
      </td>
      <td class="hn-table-time">{{ row.time }}</td>
      <td>
        <div class="hn-table-actions">
          <button class="hn-table-action">编辑</button>
          <button class="hn-table-action">复制</button>
          <button class="hn-table-action danger">删除</button>
          <button class="hn-table-action more">···</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

统一UI

Copyright © 2024