feat(scripts): #1811 文案库独立管理页面 v2 (#1924)

Co-authored-by: xiaoxia <dev@xiaoxiajianji.com>
Co-committed-by: xiaoxia <dev@xiaoxiajianji.com>

apps/web/src/pages/scripts/scripts.css

@@ -1,137 +1,168 @@
 /**
- * 文案库页面 - V21 设计系统样式
- * 单列卡片列表，风格对齐标题库（xx-titles-page）
+ * 文案库页面样式（#1811 v2）
+ * 风格对齐标题库，新增卡片 hover 阴影、标签/meta 行、筛选栏样式
  */
-@import "../../styles/global.css";
-
-/* ============================================================
-   页面容器
-   ============================================================ */
 .xx-scripts-page {
-  min-height: 100%;
-  padding: var(--space-xl);
+  padding: 24px;
+  max-width: 1200px;
+  margin: 0 auto;
 }
 
 .xx-scripts-layout {
   display: flex;
   flex-direction: column;
-  gap: var(--space-lg);
-  max-width: 960px;
-  margin: 0 auto;
+  gap: 16px;
 }
 
-/* ============================================================
-   顶部筛选栏
-   ============================================================ */
+/* ── 筛选栏 ── */
 .xx-scripts-filters {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--space-md);
+  gap: 12px;
   flex-wrap: wrap;
+  padding: 12px 16px;
+  background: var(--bg-card, #fff);
+  border-radius: 12px;
+  border: 1px solid var(--border-color, #f0f0f0);
 }
-
 .xx-scripts-filters-left {
   display: flex;
   align-items: center;
-  gap: var(--space-sm);
+  gap: 12px;
+  flex-wrap: wrap;
 }
-
 .xx-scripts-filters-right {
   display: flex;
-  align-items: center;
-  gap: var(--space-sm);
+  gap: 8px;
 }
 
-/* ============================================================
-   列表
-   ============================================================ */
+/* ── 列表 ── */
 .xx-scripts-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  gap: 16px;
 }
 
-.xx-scripts-loading {
-  text-align: center;
-  color: var(--text-secondary);
-  padding: var(--space-xl);
-  font-size: var(--font-size-sm);
-}
-
-/* ============================================================
-   文案卡片（对齐标题卡片风格，单列）
-   ============================================================ */
 .xx-script-card {
-  border: 1px solid var(--border-color);
-  background: var(--bg-primary);
-  border-radius: var(--radius-md);
-  padding: var(--space-md);
-  transition: var(--transition-all);
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+  transition:
+    box-shadow 0.2s,
+    transform 0.2s;
 }
-
 .xx-script-card:hover {
-  border-color: var(--primary-color);
-  background: var(--bg-secondary);
-  box-shadow: var(--shadow-sm);
+  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.1);
+  transform: translateY(-2px);
+}
+.xx-script-card .ant-card-body {
+  padding: 16px;
 }
 
 .xx-script-card-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: var(--space-md);
+  gap: 8px;
+  margin-bottom: 10px;
 }
-
-.xx-script-title {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
-  color: var(--text-primary);
-  line-height: 1.5;
-  word-break: break-word;
-  flex: 1;
-}
-
-.xx-script-actions {
+.xx-script-title-row {
   display: flex;
   align-items: center;
-  gap: var(--space-xxs);
-  flex-shrink: 0;
-  opacity: 0;
-  transition: var(--transition-opacity, opacity 0.2s);
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
 }
-
-.xx-script-card:hover .xx-script-actions {
-  opacity: 1;
+.xx-script-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary, #1f1f1f);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.xx-script-actions {
+  flex-shrink: 0;
+}
+.xx-script-actions .ant-btn {
+  padding: 0 6px;
 }
 
 .xx-script-preview {
-  font-size: var(--font-size-sm);
-  color: var(--text-secondary);
+  font-size: 13px;
+  color: var(--text-secondary, #666);
   line-height: 1.6;
-  word-break: break-word;
+  margin-bottom: 8px;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.xx-script-title-text {
+  font-size: 12px;
+  color: var(--text-tertiary, #999);
+  margin-bottom: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.xx-script-label {
+  color: var(--text-tertiary, #999);
+}
+
+.xx-script-tags {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 8px;
 }
 
 .xx-script-meta {
   display: flex;
   align-items: center;
-  gap: var(--space-xs);
-  font-size: var(--font-size-xs, 12px);
-  color: var(--text-tertiary);
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-tertiary, #999);
+}
+.xx-script-meta-sep {
+  opacity: 0.5;
 }
 
-/* ============================================================
-   弹窗表单
-   ============================================================ */
-.xx-script-form {
+/* ── 分页 ── */
+.xx-scripts-pagination {
   display: flex;
-  flex-direction: column;
-  gap: var(--space-md);
+  justify-content: center;
+  padding: 16px 0;
 }
 
-.xx-script-form textarea.ant-input {
-  resize: vertical;
+.xx-scripts-loading {
+  padding: 48px;
+  text-align: center;
+  color: var(--text-tertiary, #999);
+}
+
+/* ── 弹窗表单 ── */
+.xx-script-form .ant-form-item {
+  margin-bottom: 12px;
+}
+
+/* ── 响应式 ── */
+@media (max-width: 768px) {
+  .xx-scripts-page {
+    padding: 16px 12px;
+  }
+  .xx-scripts-list {
+    grid-template-columns: 1fr;
+  }
+  .xx-scripts-filters {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .xx-scripts-filters-left {
+    width: 100%;
+  }
+  .xx-scripts-filters-left .ant-input,
+  .xx-scripts-filters-left .ant-select {
+    flex: 1;
+  }
 }