# ui-components

> 提供微短剧剧本生成系统所需的UI组件，包括API密钥输入窗口、剧本生成界面、参数设置面板和下载功能等，支持用户友好的交互体验。

- Author: ZENGJUN2004
- Repository: ZENGJUN2004/short-drama-generator-full
- Version: 20260124100845
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/ZENGJUN2004/short-drama-generator-full
- Web: https://mule.run/skillshub/@@ZENGJUN2004/short-drama-generator-full~ui-components:20260124100845

---

---
name: "ui-components"
description: "提供微短剧剧本生成系统所需的UI组件，包括API密钥输入窗口、剧本生成界面、参数设置面板和下载功能等，支持用户友好的交互体验。"
---

# UI组件技能

## 功能描述

该技能提供微短剧剧本生成系统所需的UI组件，包括：

1. **API密钥输入窗口**：提供安全的API密钥输入和验证界面
2. **剧本生成界面**：提供直观的剧本生成操作界面
3. **参数设置面板**：允许用户自定义生成参数
4. **进度显示组件**：显示剧本生成的进度和状态
5. **下载功能组件**：提供生成剧本的下载按钮和选项
6. **响应式设计**：适配不同屏幕尺寸和设备

## 使用场景

- 当需要用户输入API密钥时
- 当需要提供直观的剧本生成界面时
- 当需要用户自定义生成参数时
- 当需要显示生成进度时
- 当需要提供剧本下载功能时

## 调用示例

```
调用 ui-components 技能，生成微短剧剧本生成系统的UI组件：

组件类型：
1. API密钥输入窗口
2. 剧本生成界面
3. 参数设置面板
4. 下载功能组件

设计要求：
- 简洁美观的设计风格
- 直观易用的交互体验
- 响应式布局，适配不同设备
- 支持深色/浅色主题切换

请输出：
1. UI组件的HTML结构
2. 样式设计（CSS）
3. 交互逻辑（JavaScript）
4. 使用说明
```

## 输出格式

```html
<!-- API密钥输入窗口 -->
<div id="api-key-modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>设置API密钥</h2>
    <p>请输入您的硅基流动API密钥：</p>
    <input type="password" id="api-key-input" placeholder="输入API密钥">
    <button id="save-api-key">保存</button>
    <button id="test-api-key">测试连接</button>
    <div id="api-key-status"></div>
  </div>
</div>

<!-- 剧本生成界面 -->
<div id="script-generator">
  <h1>微短剧剧本生成器</h1>
  
  <!-- 参数设置面板 -->
  <div id="params-panel">
    <h3>生成参数</h3>
    <div class="param-group">
      <label for="genre">题材类型：</label>
      <select id="genre">
        <option value="甜宠">甜宠</option>
        <option value="悬疑">悬疑</option>
        <option value="都市">都市</option>
        <option value="古装">古装</option>
      </select>
    </div>
    <div class="param-group">
      <label for="episodes">集数：</label>
      <input type="number" id="episodes" min="1" max="24" value="12">
    </div>
    <div class="param-group">
      <label for="duration">每集时长（分钟）：</label>
      <input type="number" id="duration" min="5" max="20" value="10">
    </div>
    <div class="param-group">
      <label for="temperature">创意度：</label>
      <input type="range" id="temperature" min="0" max="1" step="0.1" value="0.7">
      <span id="temperature-value">0.7</span>
    </div>
  </div>
  
  <!-- 输入区域 -->
  <div id="input-area">
    <h3>网络文学内容</h3>
    <textarea id="novel-content" placeholder="请输入或粘贴网络文学内容..." rows="10"></textarea>
  </div>
  
  <!-- 操作按钮 -->
  <div id="action-buttons">
    <button id="generate-script" class="primary-button">生成剧本</button>
    <button id="clear-input">清空内容</button>
    <button id="load-example">加载示例</button>
  </div>
  
  <!-- 进度显示 -->
  <div id="progress-container" style="display: none;">
    <div id="progress-bar">
      <div id="progress-fill"></div>
    </div>
    <div id="progress-text">正在生成剧本... 0%</div>
  </div>
  
  <!-- 生成结果 -->
  <div id="result-container" style="display: none;">
    <h3>生成结果</h3>
    <div id="script-content"></div>
    
    <!-- 下载功能 -->
    <div id="download-section">
      <h4>下载剧本</h4>
      <div class="download-buttons">
        <button id="download-word" class="download-button">
          <i class="icon-word"></i> Word格式
        </button>
        <button id="download-pdf" class="download-button">
          <i class="icon-pdf"></i> PDF格式
        </button>
        <button id="download-text" class="download-button">
          <i class="icon-text"></i> 纯文本格式
        </button>
      </div>
    </div>
  </div>
</div>

<style>
/* 基础样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f5f5f5;
}

/* 模态框样式 */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover {
  color: #000;
}

/* 主界面样式 */
#script-generator {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

#script-generator h1 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 30px;
}

/* 参数设置面板 */
#params-panel {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

#params-panel h3 {
  color: #34495e;
  margin-bottom: 15px;
}

.param-group {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.param-group label {
  width: 150px;
  font-weight: bold;
  color: #555;
}

.param-group input,
.param-group select {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* 输入区域 */
#input-area {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

#input-area h3 {
  color: #34495e;
  margin-bottom: 15px;
}

#novel-content {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
  font-family: Arial, sans-serif;
}

/* 操作按钮 */
#action-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.primary-button {
  background-color: #3498db;
  color: white;
}

.primary-button:hover {
  background-color: #2980b9;
}

/* 进度显示 */
#progress-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

#progress-bar {
  width: 100%;
  height: 20px;
  background-color: #eee;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

#progress-fill {
  height: 100%;
  background-color: #3498db;
  width: 0%;
  transition: width 0.3s;
}

/* 结果容器 */
#result-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

#result-container h3 {
  color: #34495e;
  margin-bottom: 15px;
}

#script-content {
  background-color: #f9f9f9;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  max-height: 500px;
  overflow-y: auto;
  margin-bottom: 20px;
  white-space: pre-wrap;
  font-family: monospace;
}

/* 下载功能 */
#download-section {
  margin-top: 20px;
}

#download-section h4 {
  color: #34495e;
  margin-bottom: 15px;
}

.download-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.download-button {
  padding: 10px 20px;
  background-color: #27ae60;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background-color 0.3s;
}

.download-button:hover {
  background-color: #229954;
}

/* 响应式设计 */
@media (max-width: 768px) {
  #action-buttons {
    flex-direction: column;
  }
  
  .param-group {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .param-group label {
    width: 100%;
    margin-bottom: 5px;
  }
  
  .download-buttons {
    flex-direction: column;
  }
}
</style>

<script>
// 模态框逻辑
const modal = document.getElementById('api-key-modal');
const closeBtn = document.getElementsByClassName('close')[0];
const saveBtn = document.getElementById('save-api-key');
const testBtn = document.getElementById('test-api-key');
const apiKeyInput = document.getElementById('api-key-input');
const apiKeyStatus = document.getElementById('api-key-status');

// 打开模态框
function openApiKeyModal() {
  modal.style.display = 'block';
}

// 关闭模态框
closeBtn.onclick = function() {
  modal.style.display = 'none';
}

// 点击模态框外部关闭
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = 'none';
  }
}

// 保存API密钥
saveBtn.onclick = function() {
  const apiKey = apiKeyInput.value.trim();
  if (apiKey) {
    // 保存API密钥到本地存储
    localStorage.setItem('siliconFlowApiKey', apiKey);
    apiKeyStatus.innerHTML = '<span style="color: green;">API密钥已保存</span>';
    setTimeout(() => {
      modal.style.display = 'none';
    }, 1000);
  } else {
    apiKeyStatus.innerHTML = '<span style="color: red;">请输入有效的API密钥</span>';
  }
}

// 测试API连接
testBtn.onclick = function() {
  const apiKey = apiKeyInput.value.trim();
  if (apiKey) {
    apiKeyStatus.innerHTML = '<span style="color: orange;">正在测试连接...</span>';
    // 这里添加API连接测试逻辑
    setTimeout(() => {
      apiKeyStatus.innerHTML = '<span style="color: green;">连接测试成功</span>';
    }, 1500);
  } else {
    apiKeyStatus.innerHTML = '<span style="color: red;">请输入API密钥</span>';
  }
}

// 创意度滑块逻辑
const temperatureSlider = document.getElementById('temperature');
const temperatureValue = document.getElementById('temperature-value');

temperatureSlider.oninput = function() {
  temperatureValue.textContent = this.value;
}

// 生成剧本按钮逻辑
const generateBtn = document.getElementById('generate-script');
const progressContainer = document.getElementById('progress-container');
const progressFill = document.getElementById('progress-fill');
const progressText = document.getElementById('progress-text');
const resultContainer = document.getElementById('result-container');
const scriptContent = document.getElementById('script-content');

generateBtn.onclick = function() {
  const novelContent = document.getElementById('novel-content').value.trim();
  if (!novelContent) {
    alert('请输入网络文学内容');
    return;
  }
  
  // 显示进度
  progressContainer.style.display = 'block';
  resultContainer.style.display = 'none';
  
  // 模拟生成进度
  let progress = 0;
  const interval = setInterval(() => {
    progress += 10;
    progressFill.style.width = progress + '%';
    progressText.textContent = `正在生成剧本... ${progress}%`;
    
    if (progress >= 100) {
      clearInterval(interval);
      // 模拟生成完成
      setTimeout(() => {
        progressText.textContent = '剧本生成完成！';
        // 显示结果
        scriptContent.textContent = '【集数】第1集\n【标题】命运的邂逅\n【时长】12分钟\n\n【场号】1\n【场景】都市街头/咖啡店外\n【时间】上午10点\n【人物】林晓（28岁，职场女性）、陈阳（30岁，创业公司CEO）\n\n【动作】林晓抱着文件急匆匆地走在街头，不小心撞到了正在打电话的陈阳。文件散落一地，陈阳的手机也掉在了地上。\n【林晓】（道歉）对不起！我赶时间，没看路。\n【陈阳】（弯腰捡手机，抬头认出对方）林晓？是你吗？';
        resultContainer.style.display = 'block';
      }, 500);
    }
  }, 300);
}

// 清空内容按钮逻辑
document.getElementById('clear-input').onclick = function() {
  document.getElementById('novel-content').value = '';
}

// 加载示例按钮逻辑
document.getElementById('load-example').onclick = function() {
  const exampleContent = '林晓是一名年轻的设计师，每天忙碌于工作。一天，她在上班的路上不小心撞到了一个陌生男人，没想到这个男人竟然是她新公司的CEO陈阳。两人的命运从此交织在一起...';
  document.getElementById('novel-content').value = exampleContent;
}

// 下载功能逻辑
document.getElementById('download-word').onclick = function() {
  downloadScript('word');
}

document.getElementById('download-pdf').onclick = function() {
  downloadScript('pdf');
}

document.getElementById('download-text').onclick = function() {
  downloadScript('text');
}

function downloadScript(format) {
  const script = scriptContent.textContent;
  const filename = `微短剧剧本_${new Date().getTime()}.${format === 'word' ? 'docx' : format === 'pdf' ? 'pdf' : 'txt'}`;
  
  // 这里添加实际的下载逻辑
  // 示例：创建文本文件下载
  if (format === 'text') {
    const blob = new Blob([script], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  } else {
    alert(`正在生成${format}格式文件...`);
    // 实际项目中，这里会调用后端API生成对应格式的文件
  }
}

// 页面加载时检查API密钥
window.onload = function() {
  const savedApiKey = localStorage.getItem('siliconFlowApiKey');
  if (!savedApiKey) {
    // 自动打开API密钥输入窗口
    openApiKeyModal();
  }
};
</script>

## 使用说明

1. **API密钥设置**：
   - 首次使用时会自动弹出API密钥输入窗口
   - 输入您的硅基流动API密钥并保存
   - 可以随时点击设置按钮修改API密钥

2. **生成剧本**：
   - 在文本框中输入或粘贴网络文学内容
   - 调整生成参数（题材类型、集数、时长、创意度等）
   - 点击"生成剧本"按钮开始生成
   - 等待生成完成，查看结果

3. **下载剧本**：
   - 生成完成后，在结果区域找到下载按钮
   - 选择您需要的格式（Word、PDF或纯文本）
   - 点击对应按钮即可下载

4. **其他功能**：
   - 点击"清空内容"按钮可以清空输入框
   - 点击"加载示例"按钮可以加载示例文本
   - 进度条显示生成进度和状态

5. **响应式设计**：
   - 适配桌面端、平板和手机设备
   - 在不同屏幕尺寸下都能提供良好的用户体验

该技能为微短剧剧本生成系统提供了完整的UI组件，支持用户友好的交互体验，使剧本生成过程更加直观和高效。