ISOM Research UI

简洁白色学术研究主题组件库，专为科研文献管理和学术应用设计。

版本: 1.0.1

特性

• 🎨 简洁白色主题，专业学术风格
• 🎭 多主题切换（默认蓝、DaKES、紫色、绿色、深色）
• 📚 文献卡片、搜索结果展示
• 💬 AI聊天集成
• 🔔 Toast通知系统
• 💬 悬浮窗系统（Popover、Dropdown、Tooltip）
• ⏱️ 搜索历史时间线
• 📁 文件预览与管理
• 🎭 6种背景效果（网格、渐变、粒子、波浪、几何、图片）
• 📌 侧边栏和滚动横幅
• 📱 响应式设计

安装

npm install isom-research-ui

使用

CDN引入

<link rel="stylesheet" href="dist/research-ui.min.css">
<script src="dist/research-ui.min.js"></script>

NPM引入

import ResearchUI from 'isom-research-ui';
import 'isom-research-ui/dist/research-ui.css';

组件

导航栏

<nav class="research-navbar" id="researchNavbar">
    <a class="research-navbar-brand" href="#">BiMES</a>
    <div class="research-navbar-menu">
        <a class="research-navbar-item active" href="#">首页</a>
        <a class="research-navbar-item" href="#">文献</a>
    </div>
</nav>

自动隐藏导航栏：

<nav class="research-navbar auto-hide" id="researchNavbar">...</nav>
<script>ResearchUI.initNavbarAutoHide('researchNavbar');</script>

侧边栏

<aside class="research-sidebar" id="mainSidebar">
    <div class="research-sidebar-title">导航</div>
    <ul class="research-sidebar-nav">
        <li class="research-sidebar-item active">
            <a href="#"><span class="research-sidebar-item-icon">📚</span>文献库</a>
        </li>
        <li class="research-sidebar-item">
            <a href="#"><span class="research-sidebar-item-icon">🔍</span>搜索</a>
        </li>
        <li class="research-sidebar-item">
            <a href="#"><span class="research-sidebar-item-icon">⭐</span>收藏</a>
        </li>
    </ul>
    <div class="research-sidebar-divider"></div>
    <div class="research-sidebar-title">设置</div>
    <ul class="research-sidebar-nav">
        <li class="research-sidebar-item">
            <a href="#"><span class="research-sidebar-item-icon">⚙️</span>偏好设置</a>
        </li>
    </ul>
</aside>

右侧侧边栏：

<aside class="research-sidebar right" id="rightSidebar">...</aside>

控制侧边栏：

ResearchUI.toggleSidebar('mainSidebar');
ResearchUI.openSidebar('mainSidebar');
ResearchUI.closeSidebar('mainSidebar');

滚动横幅

<div class="research-marquee" id="marquee">
    <div class="research-marquee-content">
        <span>最新文献：Deep Learning Survey 2024</span>
        <span>系统更新：新增AI摘要功能</span>
        <span>通知：数据库维护将于周日进行</span>
    </div>
</div>

动态设置横幅内容：

ResearchUI.initMarquee('marquee', [
    '最新文献：Deep Learning Survey 2024',
    '系统更新：新增AI摘要功能',
    '通知：数据库维护将于周日进行'
]);

按钮

<button class="research-btn research-btn-primary">主要按钮</button>
<button class="research-btn research-btn-secondary">次要按钮</button>
<button class="research-btn research-btn-primary research-btn-sm">小按钮</button>

输入框

<input type="text" class="research-input" placeholder="搜索...">
<input type="text" class="research-input research-input-lg" placeholder="大输入框">
<textarea class="research-textarea" placeholder="多行文本"></textarea>

卡片

<div class="research-card">
    <h3 class="research-card-title">标题</h3>
    <div class="research-card-content">内容</div>
    <div class="research-card-footer">
        <button class="research-btn research-btn-primary">操作</button>
    </div>
</div>

文献卡片

<div class="research-literature-card">
    <h4>论文标题</h4>
    <p class="research-literature-meta">PMID: 12345 | 作者名</p>
    <p class="research-literature-abstract">摘要内容...</p>
    <div class="research-literature-actions">
        <button class="research-btn research-btn-sm research-btn-primary">查看</button>
    </div>
</div>

区块/面板

<section class="research-section">
    <div class="research-section-header">
        <span class="research-section-title">搜索结果</span>
        <span class="research-badge research-badge-primary">20 条</span>
    </div>
    <div class="research-section-body scrollable">
        <!-- 内容 -->
    </div>
</section>

Toast通知

ResearchUI.success('操作成功');
ResearchUI.error('操作失败', '详细错误信息');
ResearchUI.warning('警告');
ResearchUI.info('提示信息');

加载动画

ResearchUI.showLoading('加载中...');
// 完成后
ResearchUI.hideLoading();

确认对话框

const result = await ResearchUI.confirm('确认删除', '确定要删除这条记录吗？');
if (result) {
    // 用户点击了确认
}

时间线

const timeline = ResearchUI.initTimeline('timelineContainer', {
    storageKey: 'search_history',
    maxItems: 20,
    inputId: 'searchInput'
});

timeline.add('搜索关键词');
timeline.clear();

CSS变量

可通过覆盖CSS变量自定义主题：

:root {
    --research-primary: #3b82f6;
    --research-primary-dark: #2563eb;
    --research-gray-800: #1f2937;
    /* ... */
}

配色方案

| 变量 | 默认值 | 说明 | |------|--------|------| | --research-primary | #3b82f6 | 主色调 | | --research-success | #10b981 | 成功状态 | | --research-error | #ef4444 | 错误状态 | | --research-warning | #f59e0b | 警告状态 | | --research-gray-50 | #f9fafb | 背景色 | | --research-gray-200 | #e5e7eb | 边框色 | | --research-gray-800 | #1f2937 | 文字色 |

主题系统

引入主题

<link rel="stylesheet" href="dist/themes/research-themes.css">

可用主题

| 主题类名 | 说明 | |----------|------| | research-theme | 默认蓝色主题 (#3b82f6) | | research-theme-dakes | DaKES 深蓝主题 (#007BB5) | | research-theme-purple | 紫色主题 (#8b5cf6) | | research-theme-green | 绿色主题 (#10b981) | | research-theme-dark | 深色主题 |

使用示例

<body class="research-theme-dakes">
    <!-- 页面内容 -->
</body>

切换主题：

document.body.className = 'research-theme-purple';

悬浮窗组件

气泡卡片 Popover

// 显示气泡卡片
ResearchUI.showPopover('buttonId', {
    title: '提示',
    content: '这是气泡内容',
    position: 'bottom'  // top, bottom, left, right
});

// 关闭气泡
ResearchUI.closePopover(popoverId);
ResearchUI.closeAllPopovers();

下拉菜单 Dropdown

<div class="research-dropdown" id="myDropdown">
    <button class="research-btn" onclick="ResearchUI.toggleDropdown('myDropdown')">
        菜单 ▾
    </button>
    <div class="research-dropdown-menu">
        <div class="research-dropdown-header">分组标题</div>
        <a class="research-dropdown-item" href="#">
            <span class="research-dropdown-item-icon">📄</span>选项一
        </a>
        <div class="research-dropdown-divider"></div>
        <a class="research-dropdown-item disabled">禁用选项</a>
    </div>
</div>

ResearchUI.toggleDropdown('myDropdown');
ResearchUI.openDropdown('myDropdown');
ResearchUI.closeDropdown('myDropdown');
ResearchUI.closeAllDropdowns();

工具提示 Tooltip

CSS 悬停方式：

<span class="research-tooltip-wrapper">
    <button class="research-btn">悬停显示</button>
    <span class="research-tooltip top">提示文字</span>
</span>

JS 编程方式：

ResearchUI.showTooltipAt('elementId', '提示文字', 'top');
ResearchUI.hideTooltipAt('elementId');

背景模块

Research UI 提供了多种学术风格的背景效果。

引入背景模块

<link rel="stylesheet" href="dist/backgrounds/research-backgrounds.css">
<script src="dist/backgrounds/research-backgrounds.js"></script>

背景类型

| 类型 | 说明 | |------|------| | grid | 网格背景，带动态网格线和交叉点 | | gradient | 渐变背景，带浮动光斑效果 | | particles | 粒子背景，带连接线动画 | | waves | 波浪背景，底部波浪动画 | | geometric | 几何背景，浮动几何图形 | | image | 图片背景，支持视差效果 |

使用示例

// 初始化网格背景
ResearchBG.init('grid');

// 初始化渐变背景
ResearchBG.init('gradient');

// 初始化粒子背景
ResearchBG.init('particles', { count: 50, lines: true });

// 初始化图片背景
ResearchBG.init('image', {
    src: 'path/to/image.jpg',
    blur: 2,
    opacity: 0.8,
    overlay: 'rgba(255,255,255,0.7)',
    vignette: true,
    parallax: true
});

// 切换背景
ResearchBG.switch('waves');

// 销毁背景
ResearchBG.destroy();

// 深色模式
ResearchBG.setDarkMode(true);

图片背景选项

| 选项 | 类型 | 默认值 | 说明 | |------|------|--------|------| | src | string | - | 图片URL (必需) | | position | string | 'center' | 背景位置 | | size | string | 'cover' | 背景尺寸 | | blur | number | 0 | 模糊程度(px) | | brightness | number | 1 | 亮度(0-2) | | opacity | number | 1 | 透明度(0-1) | | grayscale | number | 0 | 灰度(0-1) | | overlay | string | - | 叠加层颜色 | | vignette | boolean | false | 暗角效果 | | parallax | boolean | false | 滚动视差 | | mouseParallax | boolean | false | 鼠标视差 |

构建

npm install
npm run build

目录结构

research-ui/
├── src/
│   ├── css/
│   │   ├── research-ui.css
│   │   └── backgrounds/
│   │       └── research-backgrounds.css
│   └── js/
│       ├── research-ui.js
│       └── backgrounds/
│           └── research-backgrounds.js
├── dist/
│   ├── research-ui.css
│   ├── research-ui.min.css
│   ├── research-ui.min.js
│   └── backgrounds/
│       ├── research-backgrounds.css
│       └── research-backgrounds.min.js
└── package.json

License

MIT