业务逻辑组件库

封装了特定业务逻辑的复合组件。

组件配额 3

状态 ACTIVE

01. 流式文件上传器 (File Uploader)

支持大文件切片上传和进度实时反馈的上传组件，具备玻璃质感和状态切换。

📁

DROP_FILES_HERE

MAX_SIZE: 512MB | ACCEPT: *.*

DATA_CORE.bin 42%

---
interface Props {
  title?: string;
  maxSize?: string;
  accept?: string;
  progress?: number;
  fileName?: string;
  status?: 'idle' | 'uploading' | 'success' | 'error';
  class?: string;
}

const { 
  title = "DROP_FILES_HERE",
  maxSize = "512MB",
  accept = "*.*",
  progress = 42,
  fileName = "DATA_CORE.bin",
  status = 'uploading',
  class: className 
} = Astro.props;
---

<div class:list={["file-uploader-preview", className, status]}>
  <div class="upload-zone">
    <div class="icon">
      {status === 'success' ? '✅' : status === 'error' ? '❌' : '📁'}
    </div>
    <div class="msg">{title}</div>
    <div class="sub-msg">MAX_SIZE: {maxSize} | ACCEPT: {accept}</div>
  </div>
  
  {(status === 'uploading' || status === 'success') && (
    <div class="upload-progress">
      <div class="progress-bar">
        <div class="fill" style={{ width: `${progress}%` }}></div>
      </div>
      <div class="status-info">
        <span class="file-name">{fileName}</span>
        <span class="percent">{progress}%</span>
      </div>
    </div>
  )}
</div>

<style>
  .file-uploader-preview {
    width: 320px;
    background: var(--glass-bg);
    border: 2px dashed rgba(var(--color-primary-rgb), 0.2);
    border-radius: 12px;
    padding: 1.75rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
  }

  .file-uploader-preview:hover {
    border-color: var(--color-primary-start);
    background: rgba(var(--color-primary-rgb), 0.05);
  }

  .upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    cursor: pointer;
  }

  .icon { 
    font-size: 2.5rem;
    filter: drop-shadow(0 0 10px rgba(var(--color-primary-rgb), 0.3));
  }
  
  .msg { 
    font-family: var(--font-mono); 
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-primary-start);
    letter-spacing: 1px;
  }
  
  .sub-msg { 
    font-size: 0.65rem; 
    color: var(--color-neutral);
    opacity: 0.8;
  }

  .upload-progress {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }

  .progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
  }

  .fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary-start), var(--color-primary-end));
    box-shadow: 0 0 15px var(--color-primary-start);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .status-info {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.75rem;
  }

  .file-name {
    color: var(--color-text-body);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .percent {
    color: var(--color-primary-start);
    font-weight: 800;
  }

  /* Status Variations */
  .success .msg { color: #10b981; }
  .success .fill { background: #10b981; box-shadow: 0 0 15px #10b981; }
  
  .error { border-color: rgba(239, 68, 68, 0.3); }
  .error .msg { color: #ef4444; }
</style>

组件特性

状态感知：内置空闲、上传中、成功、失败四种状态，自动切换图标和配色。
流式进度：进度条支持平滑过渡，并带有霓虹发光效果，增强视觉动感。
玻璃质感：继承了系统的磨砂玻璃设计语言，支持背景模糊。
交互反馈：悬停时触发边框高亮和背景微光，提升操作确定性。

使用建议

建议在表单提交、附件上传或资源管理后台使用。可以通过监听 status 的变化来同步更新 UI 的其他部分。对于大文件上传，建议配合后端的分片上传接口使用。

Attributes

参数	说明	类型	默认值
title	上传区域的主提示文字	`string`	'DROP_FILES_HERE'
maxSize	允许上传的最大文件大小	`string`	'512MB'
accept	允许上传的文件类型 (MIME type)	`string`	'.'
progress	当前的上传进度百分比 (0-100)	`number`	42
fileName	当前正在上传的文件名	`string`	'DATA_CORE.bin'
status	上传器的状态控制	`'idle' \| 'uploading' \| 'success' \| 'error'`	'uploading'
class	自定义样式类名	`string`	''

02. 代码片段卡片 (Code Snippet)

优雅的代码展示容器，支持行号显示、语言标签和 macOS 风格的控制按钮。

    
CORE_LOGIC.js
 javascript  
 
        function initialize() {
      
          console.log("System Online");
      
          return true;
      
        }

---
interface Props {
  code?: string;
  lang?: string;
  title?: string;
  showLineNumbers?: boolean;
  class?: string;
}

const { 
  code = `function initialize() {
  console.log("System Online");
  return true;
}`, 
  lang = "javascript", 
  title = "CORE_LOGIC.js",
  showLineNumbers = true,
  class: className 
} = Astro.props;

const lines = code.split('\n');
---

<div class:list={["code-snippet-preview", className]}>
  <div class="snippet-header">
    <div class="header-left">
      <div class="dots">
        <span class="dot red"></span>
        <span class="dot yellow"></span>
        <span class="dot green"></span>
      </div>
      <span class="file-title">{title}</span>
    </div>
    <div class="header-right">
      <span class="lang-tag">{lang}</span>
      <button class="copy-btn" title="Copy Code">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
      </button>
    </div>
  </div>
  <div class="snippet-body">
    <pre><code>{lines.map((line, index) => (
      <div class="line">
        {showLineNumbers && <span class="line-number">{index + 1}</span>}
        <span class="line-content">{line}</span>
      </div>
    ))}</code></pre>
  </div>
</div>

<style>
  .code-snippet-preview {
    width: 100%;
    max-width: 500px;
    background: var(--glass-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  }

  .snippet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .dots {
    display: flex;
    gap: 6px;
  }

  .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }

  .red { background: #ff5f56; }
  .yellow { background: #ffbd2e; }
  .green { background: #27c93f; }

  .file-title {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-neutral);
    letter-spacing: 0.5px;
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .lang-tag {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--color-primary-start);
    text-transform: uppercase;
    background: rgba(var(--color-primary-rgb), 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
  }

  .copy-btn {
    background: transparent;
    border: none;
    color: var(--color-neutral);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
    opacity: 0.6;
  }

  .copy-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    opacity: 1;
    color: var(--color-primary-start);
  }

  .snippet-body {
    padding: 1rem 0;
    overflow-x: auto;
  }

  pre {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.6;
  }

  .line {
    display: flex;
    padding: 0 1rem;
    transition: background 0.2s;
  }

  .line:hover {
    background: rgba(255, 255, 255, 0.02);
  }

  .line-number {
    min-width: 2.5rem;
    color: rgba(255, 255, 255, 0.2);
    text-align: right;
    padding-right: 1rem;
    user-select: none;
  }

  .line-content {
    color: var(--color-text-body);
    white-space: pre;
  }
</style>

组件特性

磨砂设计：背景采用高斯模糊处理，能够完美融入各种背景环境。
macOS 风格：左上角集成了经典的红黄绿三色控制圆点，模拟原生应用质感。
交互细节：单行悬停高亮显示，右上角提供一键复制按钮（UI 占位）。
响应式排版：自动处理长代码换行和溢出，保持卡片比例协调。

使用建议

适用于展示核心算法、配置示例或 API 定义。为了保持最佳视觉效果，建议展示的代码量控制在 20 行以内。

Attributes

参数	说明	类型	默认值
code	要显示的代码内容	`string`	'function initialize() { ... }'
lang	代码语言名称，将显示在右上角	`string`	'javascript'
title	顶部的标题文字	`string`	'CORE_LOGIC.js'
showLineNumbers	是否显示行号	`boolean`	true
class	自定义样式类名	`string`	''

03. 霓虹警报 (Neon Alert)

具有强视觉引导力的提示框，通过左侧霓虹灯条和扫描线效果增强临场感。

ℹ️

SYSTEM_NOTIFICATION

Operation completed successfully. No anomalies detected in the core sectors.

---
interface Props {
  title?: string;
  message?: string;
  type?: 'info' | 'success' | 'warning' | 'error';
  icon?: string;
  class?: string;
}

const { 
  title = "SYSTEM_NOTIFICATION", 
  message = "Operation completed successfully. No anomalies detected in the core sectors.", 
  type = 'info',
  icon,
  class: className 
} = Astro.props;

const defaultIcons = {
  info: 'ℹ️',
  success: '✅',
  warning: '⚠️',
  error: '🚨'
};

const currentIcon = icon || defaultIcons[type];
---

<div class:list={["neon-alert", type, className]}>
  <div class="alert-glow"></div>
  <div class="alert-border"></div>
  <div class="alert-content">
    <div class="alert-icon">{currentIcon}</div>
    <div class="alert-text">
      {title && <div class="alert-title">{title}</div>}
      <div class="alert-message">{message}</div>
    </div>
  </div>
  <div class="alert-scanline"></div>
</div>

<style>
  .neon-alert {
    position: relative;
    width: 100%;
    max-width: 450px;
    background: rgba(0, 0, 0, 0.6);
    padding: 1rem 1.25rem;
    border-radius: 4px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: flex-start;
  }

  /* Glow and Border Effects */
  .alert-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 0% 50%, rgba(var(--alert-rgb), 0.15), transparent 70%);
    pointer-events: none;
  }

  .alert-border {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--alert-color);
    box-shadow: 0 0 15px var(--alert-color);
  }

  .alert-content {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
  }

  .alert-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 2px;
  }

  .alert-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .alert-title {
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--alert-color);
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .alert-message {
    font-size: 0.85rem;
    color: var(--color-text-body);
    line-height: 1.5;
    opacity: 0.9;
  }

  /* Scanline Animation */
  .alert-scanline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to bottom,
      transparent,
      rgba(var(--alert-rgb), 0.05) 50%,
      transparent
    );
    background-size: 100% 4px;
    pointer-events: none;
    animation: scanline 10s linear infinite;
  }

  @keyframes scanline {
    from { background-position: 0 0; }
    to { background-position: 0 100%; }
  }

  /* Types (Colors) */
  .info { 
    --alert-color: var(--color-primary-start); 
    --alert-rgb: var(--color-primary-rgb);
  }
  .success { 
    --alert-color: #10b981; 
    --alert-rgb: 16, 185, 129;
  }
  .warning { 
    --alert-color: #f59e0b; 
    --alert-rgb: 245, 158, 11;
  }
  .error { 
    --alert-color: #ef4444; 
    --alert-rgb: 239, 68, 68;
  }
</style>

组件特性

霓虹边框：左侧带有高亮度的垂直灯条，并伴有向外扩散的呼吸发光效果。
动态扫描线：内置极细的横向扫描线动画，模拟 CRT 或全息显示屏的视觉质感。
磨砂沉浸：背景采用深色半透明材质，配合高斯模糊，在任何复杂背景上都能清晰浮现。
语义化色彩：针对四种状态进行了色彩优化，确保信息的优先级能够被直观感知。

使用建议

适用于需要引起用户注意但又不想中断其操作流程的场景。可以作为全局通知系统的一部分，或者在表单提交后作为反馈显示。

Attributes

参数	说明	类型	默认值
title	提示框顶部的标题文字	`string`	'SYSTEM_NOTIFICATION'
message	详细的提示信息内容	`string`	'Operation completed successfully...'
type	警报的语义化类型，决定主题颜色	`'info' \| 'success' \| 'warning' \| 'error'`	'info'
icon	自定义图标 (Emoji 或组件)，不传则使用默认语义图标	`string`	-
class	自定义样式类名	`string`	''