cx-chat 0.0.1

package/src/components/cx-ui/button/index.less

@@ -0,0 +1,208 @@
+/**
+ * CxButton：按 size 统一高度、圆角、字号、内边距、布局（字重不覆盖，继承上下文）。
+ * 颜色来自 `src/styles/variable.less` 的 `--cx-*` / `--antd-*`（随 html.dark 切换）。
+ */
+
+.cx-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  box-sizing: border-box;
+  transition:
+    color 0.2s,
+    background-color 0.2s,
+    border-color 0.2s,
+    box-shadow 0.2s,
+    transform 0.15s ease;
+
+  &:active:not(:disabled):not(.ant-btn-disabled):not(.ant-btn-variant-text):not(.ant-btn-variant-link) {
+    transform: scale(0.95);
+  }
+
+  &.ant-btn-loading {
+    transform: none;
+  }
+}
+
+.cx-button.ant-btn-disabled:active,
+.cx-button[disabled]:active {
+  transform: none;
+}
+
+/* medium（默认）：与 antd 默认按钮 contentFontSize 一致；link 仍走 antd 原生尺寸 */
+.cx-button.cx-button--size-medium:not(.ant-btn-icon-only):not(.ant-btn-variant-text):not(.ant-btn-variant-link) {
+  min-height: 40px;
+  height: auto;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: (14px + 8px) / 14px;
+}
+
+/* small：与 ant-btn-sm 一致（antd 默认亦为 14px） */
+.cx-button.cx-button--size-small:not(.ant-btn-icon-only):not(.ant-btn-variant-text):not(.ant-btn-variant-link) {
+  min-height: 32px;
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 6px;
+  font-size: 14px;
+  line-height: (14px + 8px) / 14px;
+  white-space: nowrap;
+}
+
+/* text：与同 size 实心/描边一致外框尺寸（弹窗 取消+提交 等）；视觉仍为 antd 文本按钮 */
+.cx-button.cx-button--size-small.ant-btn-variant-text:not(.ant-btn-icon-only) {
+  min-height: 32px;
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 6px;
+  font-size: 14px;
+  line-height: (14px + 8px) / 14px;
+  white-space: nowrap;
+}
+
+.cx-button.cx-button--size-medium.ant-btn-variant-text:not(.ant-btn-icon-only) {
+  min-height: 40px;
+  height: auto;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: (14px + 8px) / 14px;
+}
+
+.cx-button.cx-button--size-large.ant-btn-variant-text:not(.ant-btn-icon-only) {
+  min-height: 44px;
+  height: auto;
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-size: 16px;
+  line-height: (16px + 8px) / 16px;
+}
+
+/* large：与 antd contentFontSizeLG 一致 */
+.cx-button.cx-button--size-large:not(.ant-btn-icon-only):not(.ant-btn-variant-text):not(.ant-btn-variant-link) {
+  min-height: 44px;
+  height: auto;
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-size: 16px;
+  line-height: (16px + 8px) / 16px;
+}
+
+/* 主色实心：阴影随 --antd-color-primary */
+.cx-button.cx-button--size-small.ant-btn-color-primary.ant-btn-variant-solid {
+  box-shadow: var(--cx-shadow-primary-sm);
+}
+
+.cx-button.cx-button--size-medium.ant-btn-color-primary.ant-btn-variant-solid,
+.cx-button.cx-button--size-large.ant-btn-color-primary.ant-btn-variant-solid {
+  box-shadow: var(--cx-shadow-primary-md);
+}
+
+/* 主色实心（覆盖 antd 默认主色，与 variable 一致） */
+.cx-button.ant-btn-primary {
+  background-color: var(--cx-color-primary-solid) !important;
+}
+
+.cx-button.ant-btn-primary:hover {
+  background-color: var(--cx-color-primary-solid-hover) !important;
+}
+
+.cx-button.ant-btn-primary.ant-btn-disabled,
+.cx-button.ant-btn-primary[disabled] {
+  color: #fff !important;
+  background-color: var(--cx-color-primary-solid) !important;
+  border-color: var(--cx-color-primary-solid) !important;
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+  text-shadow: none;
+}
+
+.cx-button.ant-btn-primary.ant-btn-disabled:hover,
+.cx-button.ant-btn-primary.ant-btn-disabled:focus,
+.cx-button.ant-btn-primary[disabled]:hover,
+.cx-button.ant-btn-primary[disabled]:focus {
+  color: #fff !important;
+  background-color: var(--cx-color-primary-solid) !important;
+  border-color: var(--cx-color-primary-solid) !important;
+  opacity: 0.5;
+}
+
+/* type=primary + danger：antd 会带 .ant-btn-dangerous，需压过上方 .ant-btn-primary 的强制主色 */
+.cx-button.ant-btn-primary.ant-btn-dangerous:not([disabled]):not(.ant-btn-disabled) {
+  background-color: #dc2626 !important;
+  border-color: #dc2626 !important;
+  color: #fff !important;
+}
+
+.cx-button.ant-btn-primary.ant-btn-dangerous:not([disabled]):not(.ant-btn-disabled):hover {
+  background-color: #b91c1c !important;
+  border-color: #b91c1c !important;
+  color: #fff !important;
+}
+
+/* antd 5+ color / variant：实心危险，与主色实心同级覆盖 */
+.cx-button.ant-btn-color-dangerous.ant-btn-variant-solid:not(.ant-btn-icon-only):not([disabled]):not(.ant-btn-disabled) {
+  background-color: #dc2626 !important;
+  border-color: #dc2626 !important;
+  color: #fff !important;
+}
+
+.cx-button.ant-btn-color-dangerous.ant-btn-variant-solid:not(.ant-btn-icon-only):not([disabled]):not(.ant-btn-disabled):hover {
+  background-color: #b91c1c !important;
+  border-color: #b91c1c !important;
+  color: #fff !important;
+}
+
+/* 空心 danger */
+.cx-button.ant-btn-color-dangerous.ant-btn-variant-outlined:not(.ant-btn-icon-only) {
+  gap: 4px;
+  padding: 6px 12px;
+  min-height: auto;
+  height: auto;
+  border-radius: 6px;
+  font-size: 14px;
+  line-height: 1.25rem;
+  background-color: var(--cx-danger-outlined-bg) !important;
+  border-color: var(--cx-danger-outlined-border) !important;
+  color: var(--cx-danger-outlined-text) !important;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+  &:hover:not(:disabled):not(.ant-btn-disabled) {
+    background-color: var(--cx-danger-outlined-hover-bg) !important;
+    border-color: var(--cx-danger-outlined-border) !important;
+    color: var(--cx-danger-outlined-text) !important;
+  }
+}
+
+/* 空心 danger：与同 size 的主按钮统一高度与内边距（避免表格工具栏与 Add/Edit 不齐） */
+.cx-button.cx-button--size-small.ant-btn-color-dangerous.ant-btn-variant-outlined:not(.ant-btn-icon-only) {
+  gap: 8px;
+  min-height: 32px;
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 6px;
+  line-height: (14px + 8px) / 14px;
+}
+
+.cx-button.cx-button--size-medium.ant-btn-color-dangerous.ant-btn-variant-outlined:not(.ant-btn-icon-only) {
+  gap: 8px;
+  min-height: 40px;
+  height: auto;
+  padding: 8px 16px;
+  border-radius: 8px;
+  line-height: (14px + 8px) / 14px;
+}
+
+.cx-button.cx-button--size-large.ant-btn-color-dangerous.ant-btn-variant-outlined:not(.ant-btn-icon-only) {
+  gap: 8px;
+  min-height: 44px;
+  height: auto;
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-size: 16px;
+  line-height: (16px + 8px) / 16px;
+}
+