@taskon/widget-react 0.0.1

package/dist/Table.css

@@ -0,0 +1,389 @@
+/**
+ * Pagination 通用分页组件样式
+ * @description 使用 taskon-pagination 命名空间
+ *
+ * 设计参考 Figma: node-id=4000-1995
+ * - 按钮: 30x30px 圆形
+ * - 页码: 16px Regular
+ * - 当前页: 白色
+ * - 分隔符+总页数: rgba(255,255,255,0.4)
+ */
+
+/* ==================== 容器 ==================== */
+.taskon-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: 16px;
+  padding: 12px 0;
+}
+
+/* ==================== 范围信息 ==================== */
+.taskon-pagination-range {
+  font-size: 14px;
+  color: var(--taskon-color-text-secondary, rgba(255, 255, 255, 0.4));
+}
+
+/* ==================== 控制区 ==================== */
+.taskon-pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+/* ==================== 页码信息 - 基于 Figma 设计 ==================== */
+.taskon-pagination-info {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 400;
+  white-space: nowrap;
+}
+
+/* 当前页码 - 白色 */
+.taskon-pagination-info-current {
+  color: var(--taskon-color-text-lightest, #ffffff);
+}
+
+/* 分隔符 - 灰色 */
+.taskon-pagination-info-separator {
+  color: var(--taskon-color-text-dark, rgba(255, 255, 255, 0.4));
+}
+
+/* 总页数 - 灰色 */
+.taskon-pagination-info-total {
+  color: var(--taskon-color-text-dark, rgba(255, 255, 255, 0.4));
+}
+
+/* ==================== 图标 ==================== */
+.taskon-pagination-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* ==================== 按钮样式 - 圆形按钮 ==================== */
+.taskon-pagination-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  min-width: 30px !important;
+  padding: 0 !important;
+  border-radius: 50% !important;
+  background-color: transparent !important;
+  border: 1px solid var(--taskon-color-border, rgba(255, 255, 255, 0.1)) !important;
+  color: var(--taskon-color-text-lightest, #ffffff) !important;
+  transition: all 0.2s ease;
+}
+
+.taskon-pagination-btn:hover:not(:disabled) {
+  background-color: var(--taskon-color-bg-hover, rgba(255, 255, 255, 0.04)) !important;
+  border-color: var(--taskon-color-border-hover, rgba(255, 255, 255, 0.2)) !important;
+}
+
+.taskon-pagination-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ==================== 尺寸变体 ==================== */
+.taskon-pagination--small .taskon-pagination-range {
+  font-size: 12px;
+}
+
+.taskon-pagination--small .taskon-pagination-info {
+  font-size: 14px;
+}
+
+.taskon-pagination--small .taskon-pagination-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.taskon-pagination--small .taskon-pagination-btn {
+  width: 24px;
+  height: 24px;
+  min-width: 24px !important;
+}
+
+/* ==================== 响应式 ==================== */
+@media (max-width: 750px) {
+  .taskon-pagination {
+    gap: 12px;
+  }
+
+  .taskon-pagination-range {
+    font-size: 3.2vw;
+  }
+
+  .taskon-pagination-info {
+    font-size: 14px;
+  }
+}
+/**
+ * Table 通用表格组件样式
+ *
+ * 采用 BEM 命名规范
+ * 前缀: taskon-table
+ *
+ * 设计参考 Figma: node-id=4000-1908
+ * - 表头: 半透明背景、圆角、暗色文字
+ * - 行: 边框分隔、悬停效果、交替背景
+ * - 单元格: 可配置宽度和对齐方式
+ */
+
+/* ============================================================================
+   容器
+   ============================================================================ */
+
+.taskon-table-container {
+  width: 100%;
+  overflow-x: auto;
+  position: relative;
+}
+
+.taskon-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+/* ============================================================================
+   表头 - 参考 Figma 设计：45px 高度，深色半透明背景，无圆角
+   ============================================================================ */
+
+.taskon-table__head {
+  /* 不在 thead 上设置背景，由 th 元素控制 */
+}
+
+.taskon-table__head tr {
+  height: 45px;
+}
+
+/* 表头单元格 - 16px Regular，深色半透明背景 */
+.taskon-table__header {
+  padding: 10px 20px;
+  font-size: 16px;
+  font-weight: 400;
+  text-align: left;
+  line-height: 24px;
+  color: var(--taskon-color-text-dark, rgba(255, 255, 255, 0.4));
+  white-space: nowrap;
+  vertical-align: middle;
+  background-color: var(--taskon-color-table-header-bg, rgba(255, 255, 255, 0.04));
+}
+
+/* 表头对齐方式 */
+.taskon-table__header--left {
+  text-align: left;
+}
+
+.taskon-table__header--center {
+  text-align: center;
+}
+
+.taskon-table__header--right {
+  text-align: right;
+}
+
+/* ============================================================================
+   表体
+   ============================================================================ */
+
+.taskon-table__body {
+  /* 默认样式 */
+}
+
+/* ============================================================================
+   数据行 - 参考 Figma 设计：更大行高（76px），无边框
+   ============================================================================ */
+
+.taskon-table__row {
+  transition: background-color 0.2s ease;
+  height: 76px;
+}
+
+/* 行边框 - 默认不显示，使用 borderless 类控制 */
+.taskon-table__row td {
+  border-top: none;
+  border-bottom: none;
+}
+
+/* 需要边框时的样式 */
+.taskon-table--bordered .taskon-table__row td {
+  border-top: 1px solid var(--taskon-color-table-border, rgba(255, 255, 255, 0.04));
+  border-bottom: 1px solid var(--taskon-color-table-border, rgba(255, 255, 255, 0.04));
+}
+
+/* 悬停效果 */
+.taskon-table__row:hover {
+  background-color: var(--taskon-color-table-row-hover, rgba(255, 255, 255, 0.04));
+}
+
+/* 交替行背景 (striped) */
+.taskon-table--striped .taskon-table__row:nth-child(even) {
+  background-color: var(--taskon-color-table-row-alt, rgba(255, 255, 255, 0.04));
+}
+
+/* 高亮行 */
+.taskon-table__row--highlighted {
+  background-color: var(--taskon-color-primary-bg, rgba(99, 102, 241, 0.1));
+}
+
+.taskon-table__row--highlighted:hover {
+  background-color: var(--taskon-color-primary-bg-hover, rgba(99, 102, 241, 0.15));
+}
+
+/* 禁用行 */
+.taskon-table__row--disabled {
+  opacity: 0.4;
+}
+
+/* 可点击行 */
+.taskon-table__row--clickable {
+  cursor: pointer;
+}
+
+/* ============================================================================
+   单元格 - 参考 Figma 设计：16px SemiBold，白色文字
+   ============================================================================ */
+
+.taskon-table__cell {
+  padding: 16px 20px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  color: var(--taskon-color-text-lightest, #ffffff);
+  vertical-align: middle;
+}
+
+/* 单元格对齐方式 */
+.taskon-table__cell--left {
+  text-align: left;
+}
+
+.taskon-table__cell--center {
+  text-align: center;
+}
+
+.taskon-table__cell--right {
+  text-align: right;
+}
+
+/* 单元格文本溢出 */
+.taskon-table__cell--ellipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* ============================================================================
+   空状态和加载状态
+   ============================================================================ */
+
+.taskon-table__loading,
+.taskon-table__empty {
+  padding: 40px 16px;
+  text-align: center;
+  color: var(--taskon-color-text-dark, rgba(255, 255, 255, 0.4));
+}
+
+.taskon-table__empty-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.taskon-table__empty-icon {
+  font-size: 48px;
+  opacity: 0.5;
+}
+
+.taskon-table__empty-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--taskon-color-text-lightest, #ffffff);
+  margin: 0;
+}
+
+.taskon-table__empty-desc {
+  font-size: 14px;
+  color: var(--taskon-color-text-dark, rgba(255, 255, 255, 0.4));
+  margin: 0;
+}
+
+/* 加载指示器 */
+.taskon-table__loading-spinner {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--taskon-color-text-dark, rgba(255, 255, 255, 0.4));
+  border-top-color: var(--taskon-color-primary, #6366f1);
+  border-radius: 50%;
+  animation: taskon-table-spin 0.8s linear infinite;
+}
+
+@keyframes taskon-table-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Overlay loading - 覆盖在表格数据上方 */
+.taskon-table__loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--taskon-color-overlay-bg, rgba(0, 0, 0, 0.5));
+  backdrop-filter: blur(2px);
+  z-index: 10;
+  border-radius: 4px;
+}
+
+/* ============================================================================
+   紧凑模式
+   ============================================================================ */
+
+.taskon-table--compact .taskon-table__header {
+  padding: 4px 12px;
+}
+
+.taskon-table--compact .taskon-table__cell {
+  padding: 12px;
+}
+
+/* ============================================================================
+   无边框模式
+   ============================================================================ */
+
+.taskon-table--borderless .taskon-table__row td {
+  border-top: none;
+  border-bottom: none;
+}
+
+/* ============================================================================
+   响应式
+   ============================================================================ */
+
+@media (max-width: 640px) {
+  .taskon-table__header,
+  .taskon-table__cell {
+    padding: 8px 12px;
+  }
+
+  .taskon-table--compact .taskon-table__header,
+  .taskon-table--compact .taskon-table__cell {
+    padding: 4px 8px;
+  }
+}

package/dist/TaskOnProvider.css

@@ -0,0 +1,163 @@
+/**
+ * Toast 组件样式
+ * 遵循 TaskOn Widget 命名规范
+ */
+
+/* ==================== Viewport 容器 ==================== */
+.taskon-toast-viewport {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 320px;
+  max-width: calc(100vw - 40px);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  z-index: 999999;
+  outline: none;
+}
+
+/* ==================== Toast 基础样式 ==================== */
+.taskon-toast {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 8px;
+  background: #1a1a1a;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  color: #fff;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+/* 动画 */
+.taskon-toast[data-state="open"] {
+  animation: taskon-toast-slide-in 200ms ease-out;
+}
+
+.taskon-toast[data-state="closed"] {
+  animation: taskon-toast-hide 100ms ease-in;
+}
+
+.taskon-toast[data-swipe="move"] {
+  transform: translateX(var(--radix-toast-swipe-move-x));
+}
+
+.taskon-toast[data-swipe="cancel"] {
+  transform: translateX(0);
+  transition: transform 200ms ease-out;
+}
+
+.taskon-toast[data-swipe="end"] {
+  animation: taskon-toast-swipe-out 100ms ease-out;
+}
+
+@keyframes taskon-toast-slide-in {
+  from {
+    transform: translateX(calc(100% + 20px));
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes taskon-toast-hide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes taskon-toast-swipe-out {
+  from {
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+  to {
+    transform: translateX(calc(100% + 20px));
+  }
+}
+
+/* ==================== Toast 图标 ==================== */
+.taskon-toast-icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+/* ==================== Toast 消息 ==================== */
+.taskon-toast-message {
+  flex: 1;
+  margin: 0;
+}
+
+/* ==================== Toast 类型变体 ==================== */
+
+/* Success */
+.taskon-toast--success {
+  border-left: 3px solid #00ffa3;
+}
+
+.taskon-toast--success .taskon-toast-icon {
+  background: rgba(0, 255, 163, 0.2);
+  color: #00ffa3;
+}
+
+/* Error */
+.taskon-toast--error {
+  border-left: 3px solid #eb5757;
+}
+
+.taskon-toast--error .taskon-toast-icon {
+  background: rgba(235, 87, 87, 0.2);
+  color: #eb5757;
+}
+
+/* Warning */
+.taskon-toast--warning {
+  border-left: 3px solid #f2c94c;
+}
+
+.taskon-toast--warning .taskon-toast-icon {
+  background: rgba(242, 201, 76, 0.2);
+  color: #f2c94c;
+}
+
+/* Info */
+.taskon-toast--info {
+  border-left: 3px solid #2f80ed;
+}
+
+.taskon-toast--info .taskon-toast-icon {
+  background: rgba(47, 128, 237, 0.2);
+  color: #2f80ed;
+}
+
+/* ==================== 响应式 ==================== */
+@media (max-width: 750px) {
+  .taskon-toast-viewport {
+    top: 10px;
+    right: 10px;
+    left: 10px;
+    width: auto;
+    max-width: none;
+  }
+
+  .taskon-toast {
+    padding: 12px 14px;
+    font-size: 13px;
+  }
+}

package/dist/WidgetShell.css

@@ -0,0 +1,182 @@
+/**
+ * Dialog 组件样式
+ * 基于 Radix UI Dialog 封装
+ * 使用 taskon-dialog-* 命名空间
+ */
+
+/* ==================== 遮罩层 ==================== */
+.taskon-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+  /* 复刻 Vue --bg-page-mask-20: rgb(66 66 66 / 50%) */
+  background-color: var(--taskon-color-overlay, rgba(66, 66, 66, 0.5));
+  backdrop-filter: blur(24px);
+
+  /* 动画 */
+  animation: taskon-dialog-overlay-fade-in 150ms ease-out;
+}
+
+.taskon-dialog-overlay[data-state="closed"] {
+  animation: taskon-dialog-overlay-fade-out 150ms ease-in;
+}
+
+@keyframes taskon-dialog-overlay-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes taskon-dialog-overlay-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* ==================== 弹窗内容 ==================== */
+.taskon-dialog-content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+
+  /* 尺寸 */
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+
+  /* 样式 - 复刻 Vue --bg-popup-basic-100: #0d0d0d */
+  background-color: var(--taskon-color-bg-popup, #0d0d0d);
+  color: var(--taskon-color-text, #ffffff);
+  border-radius: var(--taskon-border-radius-lg, 16px);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+
+  /* 布局 */
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  /* 移除默认的 focus outline */
+  outline: none;
+
+  /* 动画 */
+  animation: taskon-dialog-content-fade-in 200ms ease-out;
+}
+
+.taskon-dialog-content[data-state="closed"] {
+  animation: taskon-dialog-content-fade-out 150ms ease-in;
+}
+
+@keyframes taskon-dialog-content-fade-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes taskon-dialog-content-fade-out {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+}
+
+/* ==================== 无障碍标题/描述（屏幕阅读器可见） ==================== */
+.taskon-dialog-title--sr-only,
+.taskon-dialog-description--sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ==================== 头部操作区 ==================== */
+.taskon-dialog-header {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 1;
+
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.taskon-dialog-header-slot {
+  display: flex;
+  align-items: center;
+}
+
+/* ==================== 关闭按钮 ==================== */
+.taskon-dialog-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 32px;
+  height: 32px;
+  padding: 0;
+
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  border-radius: var(--taskon-border-radius, 8px);
+  cursor: pointer;
+
+  color: var(--taskon-color-text-secondary, #888);
+  transition: all 0.2s ease;
+}
+
+.taskon-dialog-close:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: var(--taskon-color-text, #fff);
+}
+
+.taskon-dialog-close:focus-visible {
+  outline: 2px solid var(--taskon-color-primary, #3b82f6);
+  outline-offset: 2px;
+}
+
+/* ==================== 主体内容 ==================== */
+.taskon-dialog-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+}
+
+/* ==================== 响应式 ==================== */
+@media (max-width: 750px) {
+  .taskon-dialog-content {
+    width: 95vw;
+    max-height: 90vh;
+    border-radius: var(--taskon-border-radius, 12px);
+  }
+
+  .taskon-dialog-body {
+    padding: 20px;
+  }
+
+  .taskon-dialog-header {
+    top: 12px;
+    right: 12px;
+  }
+}