Dev

client/src/views/rss-mirror/items/index.vue

@@ -184,21 +184,24 @@
       </el-form>
       <template #footer>
         <el-button @click="showDownloadDialog = false">取消</el-button>
-        <el-button type="primary" @click="confirmDownload">确定</el-button>
+        <el-button
+          type="primary"
+          :loading="downloadLoading"
+          @click="confirmDownload"
+        >
+          确定
+        </el-button>
       </template>
     </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, watch, onMounted } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { rssMirrorApi } from "@/api/rssMirror";
 import { rssSourceApi } from "@/api/rssSource";
-import type {
-  RssMirrorItemDto,
-  RssSourceDto
-} from "@/types/business";
+import type { RssMirrorItemDto, RssSourceDto } from "@/types/business";
 
 // 搜索表单
 const searchForm = reactive({
@@ -228,12 +231,20 @@ const rssSources = ref<RssSourceDto[]>([]);
 
 // 下载选项对话框
 const showDownloadDialog = ref(false);
+const downloadLoading = ref(false);
 const downloadOptions = reactive({
   videoOnly: true,
   enableKeywordFilter: true
 });
 let currentDownloadItem: RssMirrorItemDto | null = null;
 
+// 对话框关闭时重置loading状态
+watch(showDownloadDialog, val => {
+  if (!val) {
+    downloadLoading.value = false;
+  }
+});
+
 // 获取数据
 const fetchData = async () => {
   loading.value = true;
@@ -379,7 +390,7 @@ const handleDownload = (row: RssMirrorItemDto) => {
 // 确认下载
 const confirmDownload = async () => {
   if (!currentDownloadItem) return;
-
+  downloadLoading.value = true;
   try {
     await rssMirrorApi.downloadToAria2(
       currentDownloadItem.id,
@@ -392,6 +403,8 @@ const confirmDownload = async () => {
   } catch (error: any) {
     console.error("下载失败:", error);
     ElMessage.error(error.message || "下载失败");
+  } finally {
+    downloadLoading.value = false;
   }
 };
 

docs/superpowers/specs/2026-05-10-rss-source-dropdown-width-design.md

@@ -0,0 +1,77 @@
+# RSS源下拉框宽度调整设计
+
+## 1. 项目上下文
+
+当前RSS镜像条目页面（`client/src/views/rss-mirror/items/index.vue`）中，RSS源下拉框（el-select）没有显式宽度设置，使用Element Plus默认宽度。用户希望增加下拉框宽度以改善用户体验。
+
+## 2. 当前实现分析
+
+### 2.1 下拉框代码位置
+- 文件：`client/src/views/rss-mirror/items/index.vue`
+- 行号：18-31行
+- 组件：`el-select`（RSS源选择器）
+
+### 2.2 当前宽度设置
+- 无显式宽度设置
+- 由Element Plus默认样式决定（约200px）
+- 父容器为`el-form-item`，使用内联布局
+
+### 2.3 相关样式
+- 搜索表单使用`:inline="true"`布局
+- 其他表单元素（关键词输入框、下载状态选择器）也无显式宽度
+
+## 3. 设计方案
+
+### 方案一：固定像素宽度（推荐）
+- **实现方式**：为RSS源下拉框添加`style="width: 300px"`
+- **优点**：简单直接，跨浏览器一致性好
+- **缺点**：在不同屏幕尺寸下可能不够灵活
+
+### 方案二：百分比宽度
+- **实现方式**：添加`style="width: 40%"`
+- **优点**：响应式布局，适应不同屏幕
+- **缺点**：在小屏幕上可能过窄，在大屏幕上可能过宽
+
+### 方案三：最小宽度+弹性宽度
+- **实现方式**：添加`style="min-width: 250px; width: 100%"`
+- **优点**：保证最小可用宽度，同时利用可用空间
+- **缺点**：可能与其他元素宽度不协调
+
+## 4. 推荐方案
+
+**推荐方案一：固定像素宽度（300px）**
+
+理由：
+1. 与其他表单元素宽度保持一致（关键词输入框、下载状态选择器）
+2. 300px宽度足够显示常见RSS源名称
+3. 实现简单，不影响现有布局
+
+## 5. 实现细节
+
+### 5.1 代码修改
+在`el-select`组件上添加宽度样式：
+```vue
+<el-select
+  v-model="searchForm.rssSourceId"
+  placeholder="全部"
+  clearable
+  style="width: 300px"
+  @change="handleSearch"
+>
+```
+
+### 5.2 样式一致性
+建议同时调整其他搜索表单元素的宽度，保持整体一致性：
+- 关键词输入框：保持默认宽度（约200px）
+- 下载状态选择器：保持默认宽度（约200px）
+- 时间范围选择器：保持现有宽度
+
+## 6. 测试验证
+
+1. **功能测试**：确保下拉框选择功能正常
+2. **布局测试**：检查在不同屏幕尺寸下的显示效果
+3. **兼容性测试**：确保在主流浏览器中显示正常
+
+## 7. 文档更新
+
+更新相关组件文档，记录宽度调整原因和实现方式。