@aura-react-comp/x 0.0.0-stage → 0.1.0

package/esm/code-highlighter/index.js

@@ -0,0 +1,165 @@
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { Highlight } from 'prism-react-renderer';
+import { classNames, prefixCls } from '@aura-react-comp/shared';
+import { auraCodeTheme } from "./prism-theme";
+
+/** 复制按钮的成功态展示时长 */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const COPIED_RESET_DELAY = 1500;
+/** 复制图标（继承 currentColor） */
+const CopyGlyph = () => /*#__PURE__*/_jsxs("svg", {
+  viewBox: "0 0 16 16",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "1.3",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": "true",
+  focusable: "false",
+  children: [/*#__PURE__*/_jsx("rect", {
+    x: "5.5",
+    y: "5.5",
+    width: "8",
+    height: "8",
+    rx: "1.5"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M10.5 5.5V4a1.5 1.5 0 0 0-1.5-1.5H4A1.5 1.5 0 0 0 2.5 4v5A1.5 1.5 0 0 0 4 10.5h1.5"
+  })]
+});
+
+/**
+ * 复制文本：优先 Clipboard API，不可用时（非安全上下文）回退到
+ * 临时 textarea + `document.execCommand`。
+ */
+async function writeToClipboard(text) {
+  if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+  if (typeof document === 'undefined') throw new Error('clipboard unavailable');
+  const area = document.createElement('textarea');
+  area.value = text;
+  area.setAttribute('readonly', '');
+  area.style.position = 'fixed';
+  area.style.opacity = '0';
+  document.body.appendChild(area);
+  area.select();
+  try {
+    const ok = document.execCommand('copy');
+    if (!ok) throw new Error('execCommand copy returned false');
+  } finally {
+    document.body.removeChild(area);
+  }
+}
+
+/**
+ * CodeHighlighter — 代码高亮。
+ *
+ * 基于 `prism-react-renderer`：等宽字体 + 语法着色 + 头部语言标识与一键复制。
+ * 配色走 `var(--aura-*)` 令牌，亮暗主题自动跟随，无需传入主题对象。
+ */
+export const CodeHighlighter = /*#__PURE__*/forwardRef(({
+  lang = 'text',
+  children,
+  header,
+  copiedText = '已复制',
+  onCopy,
+  className,
+  style
+}, ref) => {
+  const code = children ?? '';
+  const rootRef = useRef(null);
+  const timerRef = useRef(null);
+  const [copied, setCopied] = useState(false);
+
+  // 不定依赖数组：每次提交都重新取根节点，避免 ref 晚挂载时拿到 null
+  useImperativeHandle(ref, () => ({
+    nativeElement: rootRef.current
+  }));
+
+  // 卸载时清掉未完成的成功态定时器，避免对已卸载组件 setState
+  useEffect(() => () => {
+    if (timerRef.current !== null) window.clearTimeout(timerRef.current);
+  }, []);
+  const handleCopy = useCallback(async () => {
+    try {
+      await writeToClipboard(code);
+    } catch {
+      // 复制失败（权限 / 非安全上下文）：保持原状，不打断阅读
+      return;
+    }
+    setCopied(true);
+    onCopy?.(code);
+    if (timerRef.current !== null) window.clearTimeout(timerRef.current);
+    timerRef.current = window.setTimeout(() => setCopied(false), COPIED_RESET_DELAY);
+  }, [code, onCopy]);
+  const resolvedHeader = (() => {
+    if (header === false) return null;
+    if (typeof header === 'function') {
+      const custom = header({
+        lang,
+        code
+      });
+      return custom === false ? null : custom;
+    }
+    if (header !== undefined) return header;
+    return /*#__PURE__*/_jsxs("div", {
+      className: prefixCls('x-code-highlighter-header'),
+      children: [/*#__PURE__*/_jsx("span", {
+        className: prefixCls('x-code-highlighter-lang'),
+        children: lang
+      }), /*#__PURE__*/_jsxs("button", {
+        type: "button",
+        className: prefixCls('x-code-highlighter-copy'),
+        onClick: handleCopy,
+        "aria-label": copied ? copiedText : '复制代码',
+        children: [/*#__PURE__*/_jsx(CopyGlyph, {}), /*#__PURE__*/_jsx("span", {
+          children: copied ? copiedText : '复制'
+        })]
+      })]
+    });
+  })();
+  return /*#__PURE__*/_jsxs("div", {
+    ref: rootRef,
+    className: classNames(prefixCls('x-code-highlighter'), className),
+    style: style,
+    children: [resolvedHeader, /*#__PURE__*/_jsx(Highlight, {
+      theme: auraCodeTheme,
+      code: code,
+      language: lang.toLowerCase(),
+      children: ({
+        className: prismClassName,
+        style: prismStyle,
+        tokens,
+        getLineProps,
+        getTokenProps
+      }) => /*#__PURE__*/_jsx("pre", {
+        className: classNames(prefixCls('x-code-highlighter-pre'), prismClassName),
+        style: prismStyle,
+        children: /*#__PURE__*/_jsx("code", {
+          children: tokens.map((line, lineIndex) => {
+            const lineProps = getLineProps({
+              line
+            });
+            return (
+              /*#__PURE__*/
+              // 行用 block 的 <span> 而非 <div>：<pre> / <code> 的内容模型
+              // 只接受短语内容，塞 div 是无效 HTML（读屏与结构校验都会报）
+              _jsx("span", {
+                ...lineProps,
+                className: classNames(prefixCls('x-code-highlighter-line'), lineProps.className),
+                children: line.map((token, tokenIndex) => /*#__PURE__*/_jsx("span", {
+                  ...getTokenProps({
+                    token
+                  })
+                }, tokenIndex))
+              }, lineIndex)
+            );
+          })
+        })
+      })
+    })]
+  });
+});
+CodeHighlighter.displayName = 'CodeHighlighter';

package/esm/code-highlighter/index.less

@@ -0,0 +1,76 @@
+/* CodeHighlighter — 代码高亮（头部 + Prism 着色代码区） */
+
+.aura-x-code-highlighter {
+  overflow: hidden;
+  border: 1px solid var(--aura-x-bubble-border);
+  border-radius: var(--aura-radius-md);
+  background: var(--aura-x-code-bg);
+}
+
+/* ===== 头部 ===== */
+
+.aura-x-code-highlighter-header {
+  display: flex;
+  gap: var(--aura-spacing-2);
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--aura-spacing-1) var(--aura-spacing-2) var(--aura-spacing-1)
+    var(--aura-spacing-3);
+  border-bottom: 1px solid var(--aura-border);
+  background: var(--aura-x-stage-bg);
+}
+
+.aura-x-code-highlighter-lang {
+  color: var(--aura-text-secondary);
+  font-size: var(--aura-font-size-xs);
+  letter-spacing: 0.4px;
+  text-transform: lowercase;
+}
+
+.aura-x-code-highlighter-copy {
+  display: inline-flex;
+  gap: var(--aura-spacing-1);
+  align-items: center;
+  padding: var(--aura-spacing-1) var(--aura-spacing-2);
+  border: none;
+  border-radius: var(--aura-radius-sm);
+  background: transparent;
+  color: var(--aura-text-secondary);
+  font-size: var(--aura-font-size-xs);
+  cursor: pointer;
+  transition:
+    background var(--aura-duration-fast) var(--aura-easing),
+    color var(--aura-duration-fast) var(--aura-easing);
+}
+
+.aura-x-code-highlighter-copy:hover {
+  background: var(--aura-x-accent-soft);
+  color: var(--aura-x-accent);
+}
+
+.aura-x-code-highlighter-copy:focus-visible {
+  outline: none;
+  box-shadow: var(--aura-x-focus-ring);
+}
+
+.aura-x-code-highlighter-copy > svg {
+  width: 13px;
+  height: 13px;
+}
+
+/* ===== 代码区 ===== */
+
+.aura-x-code-highlighter-pre {
+  margin: 0;
+  padding: var(--aura-spacing-3);
+  overflow-x: auto;
+  background: transparent;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: var(--aura-font-size-sm);
+  line-height: 1.65;
+}
+
+.aura-x-code-highlighter-line {
+  display: block;
+  min-height: 1.65em;
+}

package/esm/code-highlighter/prism-theme.d.ts

@@ -0,0 +1,13 @@
+import type { PrismTheme } from 'prism-react-renderer';
+/**
+ * Aura 代码高亮主题。
+ *
+ * 与 antdx 的差异：**不绑定某一套亮/暗主题**，而是把 token 颜色写成
+ * `var(--aura-*)` 引用。prism-react-renderer 只是把这些值塞进行内 `style`，
+ * 浏览器解析时仍会走 CSS 变量，于是主题切换（`data-theme`）自动生效，
+ * 无需在 JS 侧判断明暗、也不需要维护两份配色表。
+ *
+ * 颜色取语义令牌而非硬编码色值，与 `MarkdownContent` 的代码块观感保持一致
+ * （底色同为 `--aura-x-code-bg`，字体栈同为 ui-monospace 一系）。
+ */
+export declare const auraCodeTheme: PrismTheme;

package/esm/code-highlighter/prism-theme.js

@@ -0,0 +1,75 @@
+/**
+ * Aura 代码高亮主题。
+ *
+ * 与 antdx 的差异：**不绑定某一套亮/暗主题**，而是把 token 颜色写成
+ * `var(--aura-*)` 引用。prism-react-renderer 只是把这些值塞进行内 `style`，
+ * 浏览器解析时仍会走 CSS 变量，于是主题切换（`data-theme`）自动生效，
+ * 无需在 JS 侧判断明暗、也不需要维护两份配色表。
+ *
+ * 颜色取语义令牌而非硬编码色值，与 `MarkdownContent` 的代码块观感保持一致
+ * （底色同为 `--aura-x-code-bg`，字体栈同为 ui-monospace 一系）。
+ */
+export const auraCodeTheme = {
+  plain: {
+    color: 'var(--aura-text)',
+    backgroundColor: 'transparent'
+  },
+  styles: [{
+    types: ['comment', 'prolog', 'doctype', 'cdata'],
+    style: {
+      color: 'var(--aura-text-tertiary)',
+      fontStyle: 'italic'
+    }
+  }, {
+    types: ['punctuation'],
+    style: {
+      color: 'var(--aura-text-secondary)'
+    }
+  }, {
+    types: ['namespace'],
+    style: {
+      opacity: 0.7
+    }
+  }, {
+    types: ['tag', 'constant', 'symbol', 'deleted'],
+    style: {
+      color: 'var(--aura-error)'
+    }
+  }, {
+    types: ['property', 'attr-name'],
+    style: {
+      color: 'var(--aura-primary-700)'
+    }
+  }, {
+    types: ['boolean', 'number'],
+    style: {
+      color: 'var(--aura-primary-600)'
+    }
+  }, {
+    types: ['selector', 'string', 'char', 'builtin', 'inserted', 'attr-value'],
+    style: {
+      color: 'var(--aura-success)'
+    }
+  }, {
+    types: ['operator', 'entity', 'url'],
+    style: {
+      color: 'var(--aura-text-secondary)'
+    }
+  }, {
+    types: ['atrule', 'keyword'],
+    style: {
+      color: 'var(--aura-primary-700)',
+      fontWeight: '600'
+    }
+  }, {
+    types: ['function', 'class-name'],
+    style: {
+      color: 'var(--aura-info)'
+    }
+  }, {
+    types: ['regex', 'important', 'variable'],
+    style: {
+      color: 'var(--aura-warning)'
+    }
+  }]
+};

package/esm/conversations/index.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+export interface ConversationItem {
+    key: React.Key;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    timestamp?: React.ReactNode;
+}
+export interface ConversationMenuItem {
+    key: React.Key;
+    label: React.ReactNode;
+    danger?: boolean;
+}
+export interface ConversationMenuConfig {
+    /** 菜单触发按钮的图标（默认 …） */
+    icon?: React.ReactNode;
+    items: ConversationMenuItem[];
+    onClick: (item: ConversationItem, menuItemKey: React.Key) => void;
+}
+export interface ConversationsProps {
+    items: ConversationItem[];
+    /** 当前激活会话 */
+    activeKey?: React.Key;
+    onActiveChange?: (key: React.Key) => void;
+    /** 每条会话的操作菜单（重命名 / 置顶 / 删除等），传入后显示 … 触发按钮 */
+    menu?: (item: ConversationItem) => ConversationMenuConfig;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Conversations — 会话管理列表。
+ *
+ * 多会话应用的侧栏：激活高亮、时间戳、可选操作菜单（重命名 / 删除等，
+ * 由 `menu` 配置注入，组件只负责展示与回调）。
+ */
+export declare const Conversations: React.FC<ConversationsProps>;

package/esm/conversations/index.js

@@ -0,0 +1,89 @@
+import React, { useRef, useState } from 'react';
+import { classNames, prefixCls } from '@aura-react-comp/shared';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Conversations — 会话管理列表。
+ *
+ * 多会话应用的侧栏：激活高亮、时间戳、可选操作菜单（重命名 / 删除等，
+ * 由 `menu` 配置注入，组件只负责展示与回调）。
+ */
+export const Conversations = ({
+  items,
+  activeKey,
+  onActiveChange,
+  menu,
+  className,
+  style
+}) => {
+  // 同一时刻至多展开一个操作菜单
+  const [openMenuKey, setOpenMenuKey] = useState(null);
+  const openKeyRef = useRef(null);
+  openKeyRef.current = openMenuKey;
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames(prefixCls('x-conversations'), className),
+    style: style,
+    onClick: () => setOpenMenuKey(null),
+    children: /*#__PURE__*/_jsx("ul", {
+      className: prefixCls('x-conversations-list'),
+      role: "list",
+      children: items.map(item => {
+        const isActive = activeKey !== undefined && item.key === activeKey;
+        const menuConfig = menu?.(item);
+        const menuOpen = openMenuKey !== null && item.key === openMenuKey;
+        return /*#__PURE__*/_jsx("li", {
+          role: "listitem",
+          children: /*#__PURE__*/_jsxs("div", {
+            className: classNames(prefixCls('x-conversations-item'), isActive && prefixCls('x-conversations-item--active')),
+            children: [/*#__PURE__*/_jsxs("button", {
+              type: "button",
+              className: prefixCls('x-conversations-item-main'),
+              onClick: () => {
+                setOpenMenuKey(null);
+                onActiveChange?.(item.key);
+              },
+              children: [item.icon ? /*#__PURE__*/_jsx("span", {
+                className: prefixCls('x-conversations-item-icon'),
+                children: item.icon
+              }) : null, /*#__PURE__*/_jsx("span", {
+                className: prefixCls('x-conversations-item-label'),
+                children: item.label
+              }), item.timestamp ? /*#__PURE__*/_jsx("span", {
+                className: prefixCls('x-conversations-item-time'),
+                children: item.timestamp
+              }) : null]
+            }), menuConfig ? /*#__PURE__*/_jsxs("span", {
+              className: prefixCls('x-conversations-item-menu'),
+              onClick: event => event.stopPropagation(),
+              children: [/*#__PURE__*/_jsx("button", {
+                type: "button",
+                className: classNames(prefixCls('x-conversations-menu-btn'), menuOpen && prefixCls('x-conversations-menu-btn--open')),
+                "aria-label": "\u4F1A\u8BDD\u64CD\u4F5C",
+                onClick: event => {
+                  event.stopPropagation();
+                  setOpenMenuKey(menuOpen ? null : item.key);
+                },
+                children: menuConfig.icon ?? '…'
+              }), menuOpen ? /*#__PURE__*/_jsx("span", {
+                className: prefixCls('x-conversations-menu'),
+                role: "menu",
+                children: menuConfig.items.map(menuItem => /*#__PURE__*/_jsx("button", {
+                  type: "button",
+                  role: "menuitem",
+                  className: classNames(prefixCls('x-conversations-menu-item'), menuItem.danger && prefixCls('x-conversations-menu-item--danger')),
+                  onClick: event => {
+                    event.stopPropagation();
+                    menuConfig.onClick(item, menuItem.key);
+                    setOpenMenuKey(null);
+                  },
+                  children: menuItem.label
+                }, menuItem.key))
+              }) : null]
+            }) : null]
+          })
+        }, item.key);
+      })
+    })
+  });
+};
+Conversations.displayName = 'Conversations';

package/esm/conversations/index.less

@@ -0,0 +1,138 @@
+/* Conversations — 会话管理列表 */
+
+.aura-x-conversations-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: var(--aura-spacing-1);
+  list-style: none;
+}
+
+.aura-x-conversations-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: var(--aura-radius-md);
+  transition: background var(--aura-duration-fast) var(--aura-easing);
+}
+
+.aura-x-conversations-item:hover,
+.aura-x-conversations-item--active {
+  background: var(--aura-x-accent-soft);
+}
+
+.aura-x-conversations-item--active .aura-x-conversations-item-label {
+  color: var(--aura-x-accent);
+  font-weight: 500;
+}
+
+.aura-x-conversations-item-main {
+  display: flex;
+  flex: 1;
+  gap: var(--aura-spacing-2);
+  align-items: center;
+  min-width: 0;
+  padding: var(--aura-spacing-2) var(--aura-spacing-3);
+  border: none;
+  background: transparent;
+  color: var(--aura-text);
+  font-size: var(--aura-font-size-sm);
+  text-align: left;
+  cursor: pointer;
+}
+
+.aura-x-conversations-item-icon {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+
+.aura-x-conversations-item-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.aura-x-conversations-item-time {
+  flex-shrink: 0;
+  font-size: var(--aura-font-size-xs);
+  color: var(--aura-text-tertiary);
+}
+
+.aura-x-conversations-item-menu {
+  position: relative;
+  display: none;
+  flex-shrink: 0;
+}
+
+.aura-x-conversations-item:hover .aura-x-conversations-item-menu,
+.aura-x-conversations-menu-btn--open {
+  display: inline-flex;
+}
+
+.aura-x-conversations-menu-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: var(--aura-radius-sm);
+  background: transparent;
+  color: var(--aura-text-tertiary);
+  cursor: pointer;
+  letter-spacing: 1px;
+  transition: background var(--aura-duration-fast) var(--aura-easing);
+}
+
+.aura-x-conversations-menu-btn:hover,
+.aura-x-conversations-menu-btn--open {
+  background: var(--aura-x-accent-soft);
+  color: var(--aura-x-accent);
+}
+
+.aura-x-conversations-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 120px;
+  padding: var(--aura-spacing-1);
+  border: 1px solid var(--aura-x-bubble-border);
+  border-radius: var(--aura-radius-md);
+  background: var(--aura-x-bubble-ai-bg);
+  backdrop-filter: var(--aura-x-glass-blur);
+  -webkit-backdrop-filter: var(--aura-x-glass-blur);
+  box-shadow: var(--aura-x-glow);
+}
+
+.aura-x-conversations-menu-item {
+  display: block;
+  width: 100%;
+  padding: var(--aura-spacing-1) var(--aura-spacing-3);
+  border: none;
+  border-radius: var(--aura-radius-sm);
+  background: transparent;
+  color: var(--aura-text);
+  font-size: var(--aura-font-size-sm);
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--aura-duration-fast) var(--aura-easing);
+}
+
+.aura-x-conversations-menu-item:hover {
+  background: var(--aura-x-accent-soft);
+}
+
+.aura-x-conversations-menu-item--danger {
+  color: var(--aura-error);
+}
+
+.aura-x-conversations-menu-item--danger:hover {
+  background: rgba(239, 68, 68, 0.1);
+}

package/esm/file-card/index.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+export type FileCardStatus = 'init' | 'uploading' | 'done' | 'error';
+export interface FileCardProps {
+    /** 文件名（建议带扩展名，如 report.pdf） */
+    name: string;
+    /** 字节数；内部格式化为 B / KB / MB / GB */
+    size?: number;
+    /**
+     * 状态：
+     * - `init`：普通展示（默认）
+     * - `uploading`：显示进度条与百分比
+     * - `done`：成功态
+     * - `error`：失败态，显示 errorTip
+     */
+    status?: FileCardStatus;
+    /** `status="uploading"` 时的进度（0–100，越界会自动钳制） */
+    percent?: number;
+    /** 文件描述，显示在元信息下方 */
+    description?: React.ReactNode;
+    /** 失败原因；`status="error"` 时替代 description 显示 */
+    errorTip?: React.ReactNode;
+    /** 自定义图标；缺省渲染内置文件图标 */
+    icon?: React.ReactNode;
+    /** 移除按钮；不传则不渲染 */
+    onRemove?: (name: string) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/** 字节数 → 人类可读字符串（B 取整，其余保留一位小数） */
+export declare function formatFileSize(bytes: number): string;
+/** 取小写扩展名；无扩展名返回空串 */
+export declare function getFileExt(name: string): string;
+/**
+ * FileCard — 文件卡片。
+ *
+ * 附件列表、引用文件、上传结果的基本展示单元：图标、文件名、大小、
+ * 扩展名徽标与状态（上传进度 / 完成 / 失败）。通常配合
+ * [`Attachments`](/x-components/attachments) 组成输入框上方的附件条。
+ */
+export declare const FileCard: React.FC<FileCardProps>;