视频任务管理更新

backend/web_source/admin.html

@@ -754,8 +754,9 @@
         .column-permission-select {
             width: 100%;
             max-width: 100%;
-            min-height: 80px;
-            max-height: 140px;
+            min-height: 120px;
+            height: 220px;
+            max-height: 260px;
             overflow-y: auto;
             padding: 8px;
             box-sizing: border-box;
@@ -764,21 +765,81 @@
         .column-permission-select option {
             padding: 4px 0;
         }
-        .image-video-table-wrap { overflow-x: auto; }
-        .image-video-table { min-width: 1260px; }
-        .image-video-status { display:inline-block; padding:3px 8px; border-radius:4px; background:#eef1f4; font-size:12px; }
+        .image-video-panel-box { padding:0; }
+        .image-video-results { padding:20px 20px 0; }
+        .image-video-panel-box > .pagination { padding:0 20px 20px; }
+        .image-video-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
+        .image-video-toolbar-main { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
+        .image-video-batch-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; padding:8px 14px; background:#27b38b; }
+        .image-video-batch-btn:disabled { cursor:not-allowed; opacity:.45; }
+        .image-video-batch-btn svg,
+        .image-video-card-action svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
+        .image-video-select-all { display:inline-flex; align-items:center; gap:8px; color:#333; font-size:14px; cursor:pointer; }
+        .image-video-select-all input { width:16px; height:16px; accent-color:#27b38b; }
+        .image-video-download-progress { min-height:18px; color:#527067; font-size:13px; }
+        .image-video-summary { color:#666; font-size:13px; text-align:right; }
+        .image-video-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
+        .image-video-card { min-width:0; overflow:hidden; background:#fff; border:1px solid #e0e0e0; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.05); transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
+        .image-video-card:hover { border-color:#cbd7d3; box-shadow:0 6px 16px rgba(32,74,62,.1); transform:translateY(-1px); }
+        .image-video-card.selected { border-color:#27b38b; box-shadow:0 0 0 2px rgba(39,179,139,.12),0 6px 16px rgba(32,74,62,.1); }
+        .image-video-media { position:relative; width:100%; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; background:#0b0d0c; overflow:hidden; }
+        .image-video-media video { display:block; width:100%; height:100%; object-fit:contain; background:#000; }
+        .image-video-card-check { position:absolute; top:11px; left:11px; z-index:2; width:17px; height:17px; accent-color:#27b38b; cursor:pointer; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
+        .image-video-unavailable { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:20px; color:#b9c1be; text-align:center; }
+        .image-video-unavailable svg { width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1.5; }
+        .image-video-unavailable strong { color:#e0e4e2; font-size:14px; font-weight:500; }
+        .image-video-card-body { padding:15px 16px 16px; }
+        .image-video-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
+        .image-video-card-title { min-width:0; font-size:15px; font-weight:600; color:#2b3532; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+        .image-video-status { flex:0 0 auto; display:inline-block; padding:3px 8px; border-radius:4px; background:#eef1f0; color:#5b6461; font-size:11px; font-weight:600; }
         .image-video-status.SUCCESS { color:#14733b; background:#e5f5eb; }
         .image-video-status.FAILED { color:#a82d2d; background:#fbe9e9; }
-        .image-video-detail-modal { width:min(1080px, calc(100vw - 48px)); max-height:88vh; overflow:auto; }
-        .image-video-detail-meta { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:14px 0; }
-        .image-video-detail-meta div { padding:10px; background:#f6f7f8; border-radius:4px; min-width:0; }
-        .image-video-detail-meta span { display:block; color:#777; font-size:12px; margin-bottom:4px; }
-        .image-video-video-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; }
-        .image-video-video-item { border:1px solid #ddd; border-radius:6px; padding:10px; }
-        .image-video-video-item video { display:block; width:100%; aspect-ratio:16/9; background:#111; }
-        .image-video-json { margin-top:14px; }
-        .image-video-json pre { max-height:300px; overflow:auto; padding:12px; background:#172026; color:#e8edf0; border-radius:4px; white-space:pre-wrap; word-break:break-word; font-size:12px; }
-        @media (max-width: 760px) { .image-video-detail-meta { grid-template-columns:repeat(2,minmax(0,1fr)); } }
+        .image-video-status.RUNNING,
+        .image-video-status.POLLING { color:#8a6200; background:#fff3cd; }
+        .image-video-card-info { display:grid; gap:7px; }
+        .image-video-info-row { display:grid; grid-template-columns:68px minmax(0,1fr); gap:8px; color:#777; font-size:13px; line-height:1.45; }
+        .image-video-info-row span,
+        .image-video-info-row a { min-width:0; color:#333; overflow-wrap:anywhere; }
+        .image-video-info-row a { color:#218a6d; text-decoration:none; }
+        .image-video-info-row a:hover { text-decoration:underline; }
+        .image-video-copy-link { min-width:0; padding:0; border:0; background:none; color:#218a6d; cursor:pointer; font:inherit; text-align:left; }
+        .image-video-copy-link:hover { text-decoration:underline; }
+        .image-video-copy-link.copied { color:#14733b; font-weight:600; }
+        .image-video-card-actions { display:flex; align-items:center; gap:9px; margin-top:15px; }
+        .image-video-card-action { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:32px; padding:6px 11px; border:1px solid #27b38b; border-radius:4px; background:#fff; color:#218a6d; cursor:pointer; font-size:13px; }
+        .image-video-card-action:hover { background:#27b38b; color:#fff; }
+        .image-video-card-action:disabled { cursor:not-allowed; opacity:.45; }
+        .image-video-empty { grid-column:1/-1; padding:64px 20px; border:1px dashed #d7ddda; border-radius:8px; color:#777; text-align:center; background:#fafbfb; }
+        .image-video-permission-btn { display:none; min-height:36px; padding:8px 14px; }
+        .image-video-permission-modal { width:min(620px,calc(100vw - 32px)); }
+        .image-video-permission-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
+        .image-video-permission-tools { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
+        .image-video-permission-tabs { display:flex; gap:4px; margin-bottom:12px; padding:3px; border-radius:6px; background:#f1f4f3; }
+        .image-video-permission-tab { flex:1; min-height:34px; padding:7px 10px; border:0; border-radius:4px; background:transparent; color:#68736f; cursor:pointer; font:inherit; font-size:13px; }
+        .image-video-permission-tab.active { background:#fff; color:#16835e; box-shadow:0 1px 4px rgba(38,70,58,.12); font-weight:600; }
+        .image-video-permission-search { flex:1; min-width:0; padding:9px 10px; border:1px solid #ddd; border-radius:6px; font:inherit; }
+        .image-video-permission-list { max-height:52vh; overflow:auto; border:1px solid #e1e5e3; border-radius:6px; }
+        .image-video-permission-row { display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:48px; padding:9px 12px; border-bottom:1px solid #edf0ef; }
+        .image-video-permission-row:last-child { border-bottom:0; }
+        .image-video-permission-row input { width:16px; height:16px; accent-color:#27b38b; }
+        .image-video-permission-user { min-width:0; display:flex; flex-direction:column; gap:2px; }
+        .image-video-permission-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#293330; }
+        .image-video-permission-role { color:#727b78; font-size:12px; }
+        .image-video-permission-state { min-width:68px; padding:4px 8px; border:1px solid #d8dfdc; border-radius:4px; background:#fff; color:#6d7773; cursor:pointer; font-size:12px; white-space:nowrap; }
+        .image-video-permission-state.granted { border-color:#a9ddca; background:#ecfaf4; color:#16835e; }
+        .image-video-permission-state.pending { border-color:#efd39b; background:#fff8e8; color:#a56b00; }
+        .image-video-permission-summary { margin:0 0 10px; color:#66716d; font-size:13px; }
+        .image-video-permission-empty { padding:36px 16px; color:#777; text-align:center; }
+        .image-video-permission-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
+        @media (max-width: 760px) {
+            .admin-user-box { position:static !important; width:max-content; max-width:100%; margin-bottom:16px; }
+            .tabs { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
+            .tab { flex:0 0 auto; padding:10px 14px; }
+            .image-video-results { padding:16px; }
+            .image-video-toolbar { align-items:flex-start; flex-direction:column; }
+            .image-video-summary { text-align:left; }
+            .image-video-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
+        }
     </style>
 </head>
 
@@ -1521,26 +1582,31 @@
         <div class="form-box">
             <h3 style="margin-bottom:16px;font-size:15px;">视频任务筛选</h3>
             <div class="form-row">
-                <div class="form-group" style="min-width:130px;"><label>用户 ID</label><input type="number" id="imageVideoFilterUserId" min="1"></div>
                 <div class="form-group" style="min-width:150px;"><label>用户名</label><input type="text" id="imageVideoFilterUsername" placeholder="模糊搜索"></div>
-                <div class="form-group" style="min-width:130px;"><label>任务状态</label><select id="imageVideoFilterStatus"><option value="">全部</option><option value="PENDING">PENDING</option><option value="RUNNING">RUNNING</option><option value="WAITING">WAITING</option><option value="POLLING">POLLING</option><option value="SUCCESS">SUCCESS</option><option value="FAILED">FAILED</option></select></div>
-                <div class="form-group" style="min-width:180px;"><label>Coze 执行 ID</label><input type="text" id="imageVideoFilterExecuteId"></div>
                 <div class="form-group" style="min-width:170px;"><label>提交开始</label><input type="datetime-local" id="imageVideoFilterFrom"></div>
                 <div class="form-group" style="min-width:170px;"><label>提交结束</label><input type="datetime-local" id="imageVideoFilterTo"></div>
                 <button class="btn" id="btnFilterImageVideoTasks" type="button">查询</button>
                 <button class="btn btn-secondary" id="btnResetImageVideoTasks" type="button">重置</button>
             </div>
         </div>
-        <div class="panel-box">
-            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;">
-                <h3 style="font-size:15px;">视频任务记录</h3>
-                <span id="imageVideoTaskTotal" style="font-size:13px;color:#666;"></span>
-            </div>
-            <div class="image-video-table-wrap">
-                <table class="image-video-table">
-                    <thead><tr><th>任务 ID</th><th>用户</th><th>模式</th><th>状态</th><th>Coze 状态</th><th>执行 ID</th><th>视频</th><th>归档</th><th>提交时间</th><th>操作</th></tr></thead>
-                    <tbody id="imageVideoTaskListBody"></tbody>
-                </table>
+        <div class="panel-box image-video-panel-box">
+            <div class="image-video-results">
+                <div class="image-video-toolbar">
+                    <div class="image-video-toolbar-main">
+                        <button class="btn btn-secondary image-video-permission-btn" id="btnOpenImageVideoPermissions" type="button">权限配置</button>
+                        <button class="btn image-video-batch-btn" id="btnBatchDownloadImageVideos" type="button" disabled>
+                            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14"></path></svg>
+                            批量下载
+                        </button>
+                        <label class="image-video-select-all">
+                            <input type="checkbox" id="imageVideoSelectAll">
+                            全选当前页
+                        </label>
+                        <span class="image-video-download-progress" id="imageVideoDownloadProgress" aria-live="polite"></span>
+                    </div>
+                    <span class="image-video-summary" id="imageVideoTaskTotal"></span>
+                </div>
+                <div class="image-video-grid" id="imageVideoTaskGrid" aria-live="polite"></div>
             </div>
             <div class="pagination" id="imageVideoTaskPagination"></div>
         </div>
@@ -1947,16 +2013,33 @@
             </div>
         </div>
     </div>
-    <div class="modal-mask" id="imageVideoTaskDetailModal">
-        <div class="modal image-video-detail-modal">
-            <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;">
-                <h3>视频任务详情</h3>
-                <button class="btn btn-secondary btn-sm" id="btnCloseImageVideoTaskDetail" type="button">关闭</button>
+    <div class="modal-mask" id="imageVideoPermissionModal">
+        <div class="modal image-video-permission-modal" role="dialog" aria-modal="true" aria-labelledby="imageVideoPermissionTitle">
+            <div class="image-video-permission-head">
+                <h3 id="imageVideoPermissionTitle">视频任务权限配置</h3>
+                <button class="btn btn-secondary btn-sm" id="btnCloseImageVideoPermissions" type="button">关闭</button>
+            </div>
+            <div class="image-video-permission-tabs" role="tablist" aria-label="视频权限用户范围">
+                <button class="image-video-permission-tab active" type="button" role="tab" aria-selected="true" data-image-video-permission-view="granted">已分配用户 <span id="imageVideoPermissionGrantedCount">(0)</span></button>
+                <button class="image-video-permission-tab" type="button" role="tab" aria-selected="false" data-image-video-permission-view="all">全部用户 <span id="imageVideoPermissionAllCount">(0)</span></button>
+            </div>
+            <div class="image-video-permission-tools">
+                <input class="image-video-permission-search" id="imageVideoPermissionSearch" type="search" placeholder="搜索用户名">
+                <label class="image-video-select-all">
+                    <input type="checkbox" id="imageVideoPermissionSelectAll">
+                    全选搜索结果
+                </label>
+            </div>
+            <p class="image-video-permission-summary" id="imageVideoPermissionSummary"></p>
+            <div class="image-video-permission-list" id="imageVideoPermissionList" aria-live="polite"></div>
+            <p class="msg" id="imageVideoPermissionMessage" aria-live="polite"></p>
+            <div class="image-video-permission-actions">
+                <button class="btn btn-secondary" id="btnCancelImageVideoPermissions" type="button">取消</button>
+                <button class="btn" id="btnSaveImageVideoPermissions" type="button">保存</button>
             </div>
-            <div id="imageVideoTaskDetailContent"></div>
         </div>
     </div>
-    <script src="/static/admin.js"></script>
+    <script src="/static/admin.js?v=permission-tabs-3"></script>
 </body>
 
 </html>