@ohos-cpf/3rdloop 0.0.4 → 0.0.6

package/web/css/md-reader.css

@@ -0,0 +1,240 @@
+/* ════════════════════════════════════════════════════════════════════
+ * MarkdownReader — 独立样式表
+ * ════════════════════════════════════════════════════════════════════
+ * 依赖 loop.css 中定义的 CSS 变量 (--card, --text, --text2, --border 等)
+ * 若在无 loop.css 的环境中使用，需自行定义这些变量或修改为固定值。
+ */
+
+/* ─── 遮罩层 ─────────────────────────────────────────────────────────── */
+.md-reader-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    z-index: 1100;
+    justify-content: center;
+    align-items: center;
+}
+.md-reader-overlay.show { display: flex; }
+
+/* ─── 对话框 ─────────────────────────────────────────────────────────── */
+.md-reader-dialog {
+    background: var(--card);
+    border-radius: 14px;
+    width: 820px;
+    max-width: 95vw;
+    max-height: 88vh;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
+    overflow: hidden;
+}
+
+/* ─── 头部 ───────────────────────────────────────────────────────────── */
+.md-reader-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border-light);
+    flex-shrink: 0;
+}
+.md-reader-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text);
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 560px;
+}
+.md-reader-header-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+}
+.md-reader-btn-raw {
+    background: none;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 4px 10px;
+    font-size: 12px;
+    color: var(--text2);
+    cursor: pointer;
+    transition: all 0.15s;
+}
+.md-reader-btn-raw:hover {
+    background: var(--code-bg);
+    color: var(--text);
+}
+.md-reader-close {
+    background: none;
+    border: none;
+    font-size: 20px;
+    cursor: pointer;
+    color: var(--text2);
+    padding: 0 4px;
+    line-height: 1;
+}
+.md-reader-close:hover { color: var(--text); }
+
+/* ─── 正文容器 ───────────────────────────────────────────────────────── */
+.md-reader-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 24px 28px;
+    line-height: 1.7;
+    color: var(--text);
+    font-size: 14px;
+}
+
+/* ─── 源码模式 ───────────────────────────────────────────────────────── */
+.md-reader-raw {
+    font-family: "SF Mono", Monaco, "Courier New", monospace;
+    font-size: 12px;
+    line-height: 1.6;
+    white-space: pre-wrap;
+    word-break: break-all;
+    color: var(--text);
+}
+
+/* ─── 标题 ───────────────────────────────────────────────────────────── */
+.md-h { margin: 20px 0 10px; font-weight: 600; line-height: 1.3; }
+.md-h1 { font-size: 22px; border-bottom: 2px solid var(--border-light); padding-bottom: 6px; margin-top: 0; }
+.md-h2 { font-size: 19px; border-bottom: 1px solid var(--border-light); padding-bottom: 5px; }
+.md-h3 { font-size: 16px; }
+.md-h4 { font-size: 15px; }
+.md-h5 { font-size: 14px; color: var(--text2); }
+.md-h6 { font-size: 13px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.5px; }
+
+/* ─── 段落 ───────────────────────────────────────────────────────────── */
+.md-p { margin: 8px 0; }
+.md-muted { color: var(--text3); font-style: italic; }
+
+/* ─── 行内元素 ───────────────────────────────────────────────────────── */
+.md-link { color: var(--blue); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s; }
+.md-link:hover { border-bottom-color: var(--blue); }
+.md-img { max-width: 100%; border-radius: 8px; margin: 8px 0; }
+.md-inline-code {
+    font-family: "SF Mono", Monaco, monospace;
+    font-size: 12px;
+    background: var(--code-bg);
+    color: var(--inline-code-text);
+    padding: 1px 5px;
+    border-radius: 4px;
+    border: 1px solid var(--border-light);
+}
+strong { font-weight: 600; }
+em { font-style: italic; }
+del { color: var(--text3); }
+
+/* ─── 代码块 ─────────────────────────────────────────────────────────── */
+.md-code-block {
+    margin: 12px 0;
+    border-radius: 8px;
+    overflow: hidden;
+    border: 1px solid var(--border-light);
+}
+.md-code-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 6px 12px;
+    background: var(--code-bg);
+    border-bottom: 1px solid var(--border-light);
+    font-size: 11px;
+}
+.md-code-lang {
+    color: var(--text2);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 500;
+}
+.md-code-copy {
+    background: none;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    padding: 2px 8px;
+    font-size: 11px;
+    color: var(--text2);
+    cursor: pointer;
+    transition: all 0.15s;
+}
+.md-code-copy:hover {
+    background: var(--card);
+    color: var(--text);
+    border-color: var(--text2);
+}
+.md-code-block pre {
+    margin: 0;
+    padding: 14px 16px;
+    background: var(--code-bg);
+    overflow-x: auto;
+}
+.md-code-block pre code {
+    font-family: "SF Mono", Monaco, "Courier New", monospace;
+    font-size: 12px;
+    line-height: 1.6;
+    color: var(--text);
+    white-space: pre;
+}
+
+/* ─── 列表 ───────────────────────────────────────────────────────────── */
+.md-ul, .md-ol { margin: 8px 0; padding-left: 24px; }
+.md-ul li, .md-ol li { margin: 4px 0; }
+.md-ul-sub { margin-top: 4px; }
+.md-ul li::marker { color: var(--text2); }
+.md-ol li::marker { color: var(--text2); font-weight: 500; }
+
+/* ─── 引用 ───────────────────────────────────────────────────────────── */
+.md-quote {
+    margin: 12px 0;
+    padding: 10px 16px;
+    border-left: 3px solid var(--blue);
+    background: var(--code-bg);
+    border-radius: 0 6px 6px 0;
+    color: var(--text2);
+    font-style: italic;
+}
+.md-quote p { margin: 4px 0; }
+
+/* ─── 分隔线 ─────────────────────────────────────────────────────────── */
+.md-hr {
+    border: none;
+    border-top: 1px solid var(--border-light);
+    margin: 18px 0;
+}
+
+/* ─── 表格 ───────────────────────────────────────────────────────────── */
+.md-table-wrap {
+    overflow-x: auto;
+    margin: 12px 0;
+    border-radius: 8px;
+    border: 1px solid var(--border-light);
+}
+.md-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+}
+.md-table th {
+    background: var(--code-bg);
+    font-weight: 600;
+    padding: 8px 12px;
+    border-bottom: 2px solid var(--border);
+    white-space: nowrap;
+}
+.md-table td {
+    padding: 6px 12px;
+    border-bottom: 1px solid var(--border-light);
+}
+.md-table tbody tr:last-child td { border-bottom: none; }
+.md-table tbody tr:hover { background: var(--code-bg); }
+
+/* ─── 滚动条 ─────────────────────────────────────────────────────────── */
+.md-reader-body::-webkit-scrollbar { width: 6px; }
+.md-reader-body::-webkit-scrollbar-track { background: transparent; }
+.md-reader-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+.md-reader-body::-webkit-scrollbar-thumb:hover { background: var(--text3); }

package/web/css/rnlibrarycheck.css

@@ -0,0 +1,322 @@
+/* ════════════════════════════════════════════════════════════════════
+ * rnlibrarycheck.css — RN 仓库检视面板专用样式
+ *
+ * 依赖：theme.css（CSS 变量）、codecheck.css（cc-* 通用卡片/徽章/按钮样式）
+ * ════════════════════════════════════════════════════════════════════ */
+
+/* ─── 入参说明 ─────────────────────────────────────────────────────── */
+.rn-param-intro {
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 12px 14px;
+}
+
+.rn-param-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text2);
+    margin-bottom: 10px;
+}
+
+.rn-param-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+}
+
+@media (max-width: 900px) {
+    .rn-param-grid { grid-template-columns: 1fr; }
+}
+
+.rn-param-item {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    padding: 8px 10px;
+    background: var(--bg);
+    border: 1px solid var(--border-light);
+    border-radius: 6px;
+}
+
+.rn-param-name {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--blue);
+}
+
+.rn-param-code {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--text2);
+    background: var(--code-bg);
+    padding: 2px 6px;
+    border-radius: 4px;
+    word-break: break-all;
+    line-height: 1.5;
+}
+
+.rn-param-note {
+    font-size: 10px;
+    color: var(--text3);
+}
+
+.rn-param-tip {
+    margin-top: 10px;
+    font-size: 11px;
+    color: var(--text3);
+    padding-top: 8px;
+    border-top: 1px dashed var(--border-light);
+}
+
+/* ─── 评分概览面板 ─────────────────────────────────────────────────── */
+.rn-score-panel {
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 14px 16px;
+}
+
+.rn-score-panel-title {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text);
+    margin-bottom: 10px;
+}
+
+.rn-score-overall-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    background: var(--card);
+    border-radius: 6px;
+    margin-bottom: 10px;
+}
+
+.rn-score-label {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text);
+    width: 64px;
+    flex-shrink: 0;
+}
+
+.rn-score-value {
+    font-size: 18px;
+    font-weight: 700;
+    font-family: var(--mono);
+    padding: 3px 12px;
+    border-radius: 6px;
+}
+
+.rn-score-weights {
+    font-size: 10px;
+    color: var(--text3);
+    margin-left: auto;
+    text-align: right;
+}
+
+.rn-score-grid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 8px;
+}
+
+@media (max-width: 900px) {
+    .rn-score-grid { grid-template-columns: repeat(3, 1fr); }
+}
+
+.rn-score-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 7px 10px;
+    background: var(--card);
+    border: 1px solid var(--border-light);
+    border-radius: 6px;
+}
+
+.rn-score-item-label {
+    font-size: 11px;
+    color: var(--text2);
+    flex-shrink: 0;
+}
+
+.rn-score-item-value {
+    font-size: 13px;
+    font-weight: 700;
+    font-family: var(--mono);
+    padding: 2px 8px;
+    border-radius: 4px;
+    color: var(--text3);
+}
+
+/* ─── 步骤进度面板 ─────────────────────────────────────────────────── */
+.rn-steps-panel {
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 14px 16px;
+}
+
+.rn-steps-title-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    margin-bottom: 10px;
+    flex-wrap: wrap;
+}
+
+.rn-steps-title {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text);
+    margin-bottom: 0;
+}
+
+/* ─── 打包下载全部报告按钮 ─────────────────────────────────────────── */
+.rn-archive-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 6px 14px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 600;
+    background: rgba(52,199,89,0.12);
+    color: var(--green);
+    border: 1px solid rgba(52,199,89,0.3);
+    cursor: pointer;
+    white-space: nowrap;
+    flex-shrink: 0;
+    transition: all 0.15s;
+}
+.rn-archive-btn:hover:not(:disabled) {
+    background: rgba(52,199,89,0.2);
+    border-color: rgba(52,199,89,0.5);
+}
+.rn-archive-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.rn-steps-list {
+    display: flex;
+    flex-direction: column;
+}
+
+.rn-step-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 9px 0;
+    border-bottom: 1px dashed var(--border-light);
+}
+
+.rn-step-row:last-child { border-bottom: none; }
+
+.rn-step-icon {
+    width: 32px;
+    height: 32px;
+    font-size: 13px;
+    font-weight: 700;
+    border: 2px solid var(--border);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--card);
+    color: var(--text2);
+    flex-shrink: 0;
+    transition: border-color 0.2s, background 0.2s, color 0.2s;
+}
+
+.rn-step-icon.running {
+    border-color: var(--blue);
+    background: rgba(0,113,227,0.08);
+}
+.rn-step-icon.completed {
+    border-color: var(--green);
+    background: rgba(52,199,89,0.1);
+    color: var(--green);
+}
+.rn-step-icon.failed {
+    border-color: var(--red);
+    background: rgba(255,59,48,0.1);
+    color: var(--red);
+}
+.rn-step-icon.skipped {
+    border-color: var(--gray);
+    background: rgba(142,142,147,0.08);
+    color: var(--gray);
+}
+
+.rn-step-info { flex: 1; min-width: 0; }
+
+.rn-step-name {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text);
+    margin-bottom: 1px;
+}
+
+.rn-step-weight {
+    font-size: 10px;
+    font-weight: 400;
+    color: var(--text3);
+    font-family: var(--mono);
+}
+
+.rn-step-desc {
+    font-size: 11px;
+    color: var(--text3);
+    font-family: var(--mono);
+}
+
+.rn-step-actions {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+}
+
+.rn-step-score {
+    font-size: 12px;
+    font-weight: 700;
+    font-family: var(--mono);
+    padding: 3px 9px;
+    border-radius: 5px;
+}
+
+/* ─── 步骤对话按钮 ─────────────────────────────────────────────────── */
+.rn-session-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 26px;
+    padding: 0;
+    border-radius: 6px;
+    font-size: 12px;
+    background: rgba(175,82,222,0.1);
+    color: var(--purple);
+    border: 1px solid rgba(175,82,222,0.3);
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all 0.15s;
+}
+
+.rn-session-btn:hover:not(:disabled) {
+    background: rgba(175,82,222,0.2);
+    border-color: rgba(175,82,222,0.5);
+}
+
+.rn-session-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* ─── 面板布局 ─────────────────────────────────────────────────────── */
+#p-rnlibrarycheck .panel-pad {
+    padding: 20px 24px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}