agentworkshop 0.7.39 → 0.7.41

package/app/pages/logs/index.vue

@@ -243,7 +243,10 @@
               </td>
             </tr>
             <!-- 详情行内展开:紧贴事件行,点击即见(不再沉到表尾) -->
-            <tr v-if="expandedId === row.id">
+            <tr
+              v-if="expandedId === row.id"
+              class="log-detail-row"
+            >
               <td
                 colspan="7"
                 class="detail-td"
@@ -252,7 +255,7 @@
               </td>
             </tr>
           </template>
-          <tr>
+          <tr class="log-empty-row">
             <td
               v-if="opsLog.results.length === 0"
               colspan="7"
@@ -519,7 +522,7 @@ export default { name: 'OpsLogsPage' }
 <style scoped>
 .page { display: flex; flex-direction: column; gap: 12px; }
 .head-actions { display: flex; gap: 10px; align-items: center; padding-bottom: 4px; }
-.sub { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-faint); }
+.sub { margin: 8px 0 0; font-size: 13px; color: var(--ink-faint); }
 .live-dot {
   width: 8px; height: 8px; border-radius: 50%;
   background: var(--tone-success-dot);
@@ -531,7 +534,7 @@ export default { name: 'OpsLogsPage' }
   70% { box-shadow: 0 0 0 8px transparent; }
   100% { box-shadow: 0 0 0 0 transparent; }
 }
-.live-txt { font-size: 11px; color: var(--ink-faint); }
+.live-txt { font-size: 11.5px; color: var(--ink-faint); }
 
 .filter-card {
   display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
@@ -541,10 +544,27 @@ export default { name: 'OpsLogsPage' }
   border-radius: 10px;
   backdrop-filter: var(--aurora-blur) saturate(1.15);
 }
+/* 窄屏:6 个筛选维度从"一行一个"改成两列网格。
+ * 单列时筛选区独占整整一屏,用户要滚过 6 个下拉才看到第一条日志(实测 390)。 */
+@media (max-width: 640px) {
+  .filter-card {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+    align-items: end;
+  }
+
+  /* 关键词是"宽输入",跨两列;两个动作按钮也跨两列,各自成行 */
+  .filter-card .flt-grow,
+  .filter-card > button {
+    grid-column: 1 / -1;
+  }
+}
+
 .flt { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--ink-faint); }
 .flt-grow { flex: 1 1 180px; }
 .inp-sel {
-  min-width: 0; padding: 6px 9px; font-size: 12.5px; color: var(--ink);
+  min-width: 0; padding: 6px 9px; font-size: 13px; color: var(--ink);
   background: var(--frost-bg);
   border: 1px solid var(--glass-line); border-radius: 7px; outline: none;
 }
@@ -557,8 +577,8 @@ export default { name: 'OpsLogsPage' }
   overflow: hidden;
   backdrop-filter: var(--aurora-blur) saturate(1.15);
 }
-.err { margin: 0; padding: 8px 14px; font-size: 12px; color: var(--tone-danger-dot); }
-.log-table { width: 100%; font-size: 12.5px; border-collapse: collapse; }
+.err { margin: 0; padding: 8px 14px; font-size: 13px; color: var(--tone-danger-dot); }
+.log-table { width: 100%; font-size: 13px; border-collapse: collapse; }
 .log-table th {
   position: sticky; top: 0; z-index: 1;
   padding: 8px 10px; text-align: left; font-weight: 600; color: var(--ink-soft);
@@ -573,10 +593,10 @@ export default { name: 'OpsLogsPage' }
 .th-time, .th-src, .th-kind { white-space: nowrap; }
 .th-detail { width: 72px; }
 .actor { white-space: nowrap; }
-.summary .action { display: block; font-size: 10px; color: var(--ink-faint); }
+.summary .action { display: block; font-size: 11.5px; color: var(--ink-faint); }
 .scope { display: flex; flex-wrap: wrap; gap: 4px; max-width: 220px; }
 .scope-chip {
-  padding: 1px 7px; font-size: 10.5px; color: var(--ink-soft);
+  padding: 1px 7px; font-size: 11.5px; color: var(--ink-soft);
   background: var(--frost-bg); border-radius: 99px; white-space: nowrap;
 }
 .detail-cell { white-space: nowrap; }
@@ -585,17 +605,17 @@ export default { name: 'OpsLogsPage' }
 .detail-td { padding: 0 !important; }
 .detail-box {
   max-height: 260px; margin: 0; padding: 10px 14px; overflow: auto;
-  font-size: 11.5px; color: var(--ink-soft); white-space: pre-wrap; word-break: break-word;
+  font-size: 12.5px; color: var(--ink-soft); white-space: pre-wrap; word-break: break-word;
   background: var(--paper-deep); border-top: 1px solid var(--glass-line);
 }
 .src-badge {
-  display: inline-block; padding: 1px 8px; font-size: 10.5px;
+  display: inline-block; padding: 1px 8px; font-size: 11.5px;
   border: 1px solid var(--glass-line); border-radius: 99px; color: var(--ink-faint);
 }
 .src-badge.agent { color: var(--tone-info-dot); border-color: color-mix(in srgb, var(--tone-info-dot) 40%, transparent); }
 .src-badge.user { color: var(--tone-success-dot); border-color: color-mix(in srgb, var(--tone-success-dot) 40%, transparent); }
 .kind-chip {
-  display: inline-block; padding: 1px 7px; font-size: 10.5px;
+  display: inline-block; padding: 1px 7px; font-size: 11.5px;
   color: var(--ink-soft); background: var(--frost-bg); border-radius: 5px; white-space: nowrap;
 }
 .kind-chip.alarm { color: var(--tone-danger-dot); background: var(--tone-danger-bg); }
@@ -621,11 +641,125 @@ export default { name: 'OpsLogsPage' }
 }
 .m-f { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--ink-faint); }
 .m-f textarea, .m-f .inp-sel {
-  padding: 7px 9px; font-size: 12.5px; color: var(--ink);
+  padding: 7px 9px; font-size: 13px; color: var(--ink);
   background: var(--frost-bg); border: 1px solid var(--glass-line); border-radius: 7px; outline: none;
   font-family: inherit; resize: vertical;
 }
 .m-f textarea:focus, .m-f .inp-sel:focus { border-color: color-mix(in srgb, var(--tone-info-dot) 55%, transparent); }
 .m-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
 .m-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
+
+/* ══ 窄屏(≤899px):7 列表格在 375px 上被卡片裁掉四列(实测只剩"时间/来源/操作者"),
+   每行高达 154px,字号被压到 10px。窄屏不再横向拖动"账页",
+   而是把每行折成一张事件卡 —— 三段堆叠,一条日志一眼读完:
+     ① 时间戳 · 来源徽标 · 分类 chip · [展开]
+     ② 消息摘要(整行,可换行,13px)
+     ③ 操作者 + 归属维度(产线/产品/Recipe)
+   表格语义(thead)在窄屏隐藏,列身份由"位置 + chip 颜色"承担。 */
+@media (max-width: 899px) {
+  .log-table {
+    display: block;
+    font-size: 13px;
+  }
+
+  .log-table thead {
+    display: none;
+  }
+
+  .log-table tbody {
+    display: block;
+  }
+
+  .log-table tr {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px 8px;
+    align-items: center;
+    padding: 10px 12px;
+    border-bottom: 1px solid color-mix(in srgb, var(--glass-line) 55%, transparent);
+  }
+
+  .log-table td {
+    display: block;
+    max-width: 100%;
+    padding: 0;
+    border-bottom: 0;
+  }
+
+  .log-table td.mono.dim {
+    order: 1;
+    font-size: 11.5px;
+  }
+
+  .log-table td:nth-child(2) { order: 2; }
+
+  .log-table td:nth-child(4) { order: 3; }
+
+  .log-table td.actor {
+    order: 4;
+    font-size: 11.5px;
+    color: var(--ink-faint);
+  }
+
+  .log-table td.detail-cell {
+    order: 5;
+    margin-left: auto;
+    white-space: normal;
+  }
+
+  .log-table td.summary {
+    order: 6;
+    flex: 1 1 100%;
+    font-size: 13px;
+    line-height: 1.5;
+  }
+
+  .log-table td.scope {
+    order: 7;
+    flex: 1 1 100%;
+    max-width: 100%;
+  }
+
+  /* 详情行 / 空态行不参与"事件卡"排布 */
+  .log-table tr.log-detail-row {
+    display: block;
+    padding: 0;
+  }
+
+  .log-table tr.log-detail-row td {
+    display: block;
+  }
+
+  .log-table tr.log-empty-row td,
+  .log-table td.empty {
+    flex: 1 1 100%;
+    width: 100%;
+    text-align: center;
+  }
+
+  /* 手指命中区:表格内的 mini-btn 原始高度只有 ~24px */
+  .log-table .mini-btn,
+  .filter-card .mini-btn,
+  .filter-card .pill-btn,
+  .head-actions .pill-btn,
+  .m-actions .pill-btn,
+  .m-actions .ghost-btn {
+    min-height: 40px;
+    padding: 8px 14px;
+  }
+
+  /* 筛选条:窄屏一项一行,不再两列互挤 */
+  .filter-card {
+    padding: 10px;
+    gap: 8px;
+  }
+
+  .flt,
+  .flt-grow,
+  .flt .inp-sel {
+    flex: 1 1 100%;
+    width: 100%;
+    min-width: 0;
+  }
+}
 </style>

package/app/pages/monitor.vue

@@ -580,19 +580,34 @@ const processColumns = computed(() => [
   align-items: center;
 }
 
+/* 前三张是"一个数"的量规;第四张「服务进程」内容是 PID + 时长 + ISO 快照时间,
+ * 等宽 4 列时它只有 ~200px,文案折成三行(实测 1440)。给它两列 ——
+ * 列宽按**内容长度**分,不是按卡片数量平均分。 */
 .stat-grid {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 14px;
   margin-bottom: 16px;
 }
 
+.stat-grid > :last-child {
+  grid-column: span 2;
+}
+
 @media (max-width: 1100px) {
   .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }
 
+/* 窄屏两列:前三张是"一个数"的量规(标签 + 大字),单列会让每张卡
+ * 占掉 ~150px 高、四张卡吃掉整整一屏(实测)。第四张「服务进程」内容是长字符串,
+ * 让它独自跨两列 —— 这是按**内容**分的列,不是按数量硬凑。 */
 @media (max-width: 640px) {
-  .stat-grid { grid-template-columns: 1fr; }
+  .stat-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+  }
+
+  .stat-grid > :last-child { grid-column: 1 / -1; }
 }
 
 .stat {
@@ -602,10 +617,10 @@ const processColumns = computed(() => [
 .stat-label {
   margin: 0 0 6px;
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: 11.5px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
-  color: var(--ink-soft, rgba(120, 112, 96, 0.8));
+  color: var(--ink-soft);
 }
 
 .stat-value {
@@ -619,17 +634,20 @@ const processColumns = computed(() => [
   font-size: 17px;
 }
 
+/* 实测:opacity 0.6 会把 11px 的说明文字压到 4.5:1 之下,
+   改为直接使用 ink-faint(两套主题实测均 ≥5.4:1),不再靠透明度降级。 */
 .stat-updated {
   margin: 6px 0 0;
-  font-size: 11px;
-  opacity: 0.6;
+  font-size: 11.5px;
+  color: var(--ink-faint);
+  overflow-wrap: anywhere;
 }
 
 .orphan-badge {
   margin-left: 6px;
   padding: 1px 6px;
   font-family: var(--font-mono);
-  font-size: 11px;
+  font-size: 11.5px;
   color: var(--tone-warning-dot);
   background: rgb(250 140 22 / 12%);
   border-radius: var(--radius-chip);
@@ -638,32 +656,58 @@ const processColumns = computed(() => [
 .agent-sub {
   display: block;
   margin-top: 2px;
-  font-size: 10px;
+  font-size: 11.5px;
   color: var(--ink-faint);
 }
 
 .scope-tag {
   margin-left: 10px;
-  font-size: 11px;
+  font-size: 11.5px;
   vertical-align: 3px;
 }
 
 /* 卡片右上角计数:tabular mono 数据(非眉题) */
 .count-extra {
-  font-size: 11px;
+  font-size: 11.5px;
   color: var(--ink-faint);
 }
 
 .toggle-label {
-  font-size: 12px;
+  font-size: 12.5px;
   color: var(--ink-soft);
 }
 
 .small {
-  font-size: 12px;
+  font-size: 12.5px;
 }
 
 .aw-panel + .aw-panel {
   margin-top: 16px;
 }
+
+/* ══ 窄屏(≤899px)═══════════════════════════════════════════════════════
+   概要卡在 ≤640 已是单列(见上方 .stat-grid);这里只处理行内文字的收边:
+   说明句长(时间 + 版本)在 375px 会顶到卡片右缘,允许它断行。 */
+/* 空表占位行:antd 会给固定列单元格加 position: sticky,而 scroll.x=980
+   让整行宽 980px —— 在 375px 视口里它就成了"视口外的固定元素"(实测
+   td.ant-table-cell 暂无数据 left=47 right=1027)。占位单元格没有固定列语义,
+   取消 sticky 即可(有数据时固定列行为不变)。 */
+.monitor :deep(.ant-table-placeholder > td) {
+  position: static !important;
+}
+
+@media (max-width: 899px) {
+  .stat-updated {
+    line-height: 1.5;
+  }
+
+  .head-right {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .toggle-label {
+    font-size: 13px;
+  }
+}
 </style>

package/app/pages/permissions/index.vue

@@ -331,4 +331,38 @@ onMounted(load)
 .matrix .row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
   padding: 8px 12px; border: 1px solid var(--aw-border, rgba(128, 152, 199, .25)); border-radius: 10px; }
 .line-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* ══ 窄屏(v9):页面收边 / 搜索框占满行 / 矩阵表横向卷轴 + 首列可读 ═══════ */
+@media (max-width: 900px) {
+  .perm-page {
+    max-width: 100%;
+    padding: 16px 12px 40px;
+  }
+
+  .aw-page-head :deep(.ant-input-search) {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  .perm-page :deep(.ant-table-content) table { min-width: 820px; }
+
+  .perm-page :deep(.ant-table-thead > tr > th:first-child),
+  .perm-page :deep(.ant-table-tbody > tr > td:first-child) { min-width: 120px; }
+
+  /* 抽屉里的授权矩阵:窄屏"线名 — 三态"必须上下堆叠,否则线名被压成竖排 */
+  .matrix .row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 6px;
+  }
+
+  .line-name { white-space: normal; }
+  .detail dd { overflow-wrap: anywhere; }
+}
+
+@media (max-width: 640px) {
+  .perm-page { padding: 12px 8px 40px; }
+  .pg-sub { font-size: 11.5px; line-height: 1.5; }
+  .hint { font-size: 11.5px; }
+}
 </style>

package/app/pages/plugins/index.vue

@@ -264,10 +264,13 @@ onMounted(load)
 .card-desc { margin: 8px 0; font-size: 12px; opacity: .75; min-height: 18px; }
 .card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
 .tag { padding: 2px 8px; border-radius: 999px; font-size: 10px; border: 1px solid rgba(128, 152, 199, .3); }
-.tag.project { border-color: rgba(53, 224, 160, .5); color: #35e0a0; }
-.tag.user { border-color: rgba(65, 200, 244, .5); color: #41c8f4; }
-.tag.on { border-color: rgba(53, 224, 160, .5); color: #35e0a0; }
-.tag.off { border-color: rgba(255, 107, 107, .4); color: #ff6b6b; }
+/* 标签文字色用 color-mix 向 --ink 收:品牌绿/青/红是**亮色画布上的浅色**,
+   直接当文字色在亮色档只有 1.5–2.5:1(实测)。向墨色混合后暗色档几乎不变
+   (墨色本身就是浅色),亮色档自动压深到 AA —— 一处改动同时服务两套主题。 */
+.tag.project { border-color: rgba(53, 224, 160, .5); color: color-mix(in srgb, #35e0a0 42%, var(--ink)); }
+.tag.user { border-color: rgba(65, 200, 244, .5); color: color-mix(in srgb, #41c8f4 46%, var(--ink)); }
+.tag.on { border-color: rgba(53, 224, 160, .5); color: color-mix(in srgb, #35e0a0 42%, var(--ink)); }
+.tag.off { border-color: rgba(255, 107, 107, .4); color: color-mix(in srgb, #ff6b6b 55%, var(--ink)); }
 .tag.client { border-color: color-mix(in srgb, var(--ink) 24%, transparent); color: var(--ink-soft); }
 .card-routes { display: flex; flex-direction: column; gap: 2px; }
 .card-routes code { font-size: 10px; opacity: .65; }
@@ -277,4 +280,32 @@ onMounted(load)
 .detail-route { display: block; font-size: 11px; opacity: .8; margin-bottom: 4px; }
 h4 { margin: 16px 0 6px; }
 .dim { opacity: .45; }
+
+/* ══ 窄屏(v9):页面收边 / 统计带换行 / 卡片单列(去掉 320px 硬下限) ══════ */
+@media (max-width: 900px) {
+  .plugins-page {
+    max-width: 100%;
+    padding: 16px 12px 40px;
+  }
+
+  .pg-stats {
+    flex-wrap: wrap;
+    gap: 10px 14px;
+    width: 100%;
+    font-size: 11.5px;
+  }
+
+  .pg-grid { grid-template-columns: 1fr; }
+  .card-head { flex-wrap: wrap; }
+  .card-routes code { overflow-wrap: anywhere; }
+  .detail-route { overflow-wrap: anywhere; }
+}
+
+@media (max-width: 640px) {
+  .plugins-page { padding: 12px 8px 40px; }
+  .pg-sub { font-size: 11.5px; line-height: 1.5; }
+  .tag { font-size: 11.5px; }
+  .card-desc { font-size: 12.5px; }
+  .pg-stats :deep(.ant-btn) { min-height: 40px; }
+}
 </style>