create-aiaui-module 0.1.1-TEST → 0.1.2-TEST

package/templates/JobInformation/resources/src/defaults/styles.css

@@ -1,90 +1,619 @@
-.aia-job-information {
+/* Built-in default panel styles (ported from the legacy Job Information page). */
+
+.legacy-jobs {
   display: grid;
-  gap: 16px;
-  padding: 20px;
-  color: var(--aia-text, #222);
-  font: inherit;
+  gap: 20px;
+  padding: 28px;
 }
 
-.aiaji-slot h3 {
-  margin: 0 0 8px;
-  font-size: 0.85rem;
-  letter-spacing: 0.04em;
+.legacy-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  min-height: 42px;
+}
+
+.legacy-search:focus-within {
+  border-color: color-mix(in srgb, var(--workspace-accent) 40%, #ffffff);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--workspace-accent) 8%, transparent);
+}
+
+.legacy-filters {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+}
+
+.legacy-search {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 6px;
+  height: 30px;
+  color: var(--apple-muted, #62626b);
+  border: 1px solid rgba(14, 18, 32, 0.07);
+  border-radius: 8px;
+  background: var(--apple-card, #ffffff);
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.legacy-search > svg {
+  align-self: center;
+  margin-left: 10px;
 }
 
-.aiaji-slot button {
+.legacy-search input {
+  flex: none;
+  min-width: 0;
   font: inherit;
+  line-height: 28px;
+  border: 0;
+  outline: 0;
+  padding: 0 10px 0 0;
+  width: 220px;
+  color: var(--apple-text, #101014);
+  background: transparent;
+}
+
+.legacy-filter,
+.legacy-refresh {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 30px;
+  min-height: 30px;
+  box-sizing: border-box;
+  font: inherit;
+  color: var(--apple-text, #101014);
+  background: var(--apple-card, #ffffff);
+  border: 1px solid rgba(14, 18, 32, 0.07);
+  border-radius: 8px;
+  padding: 0 10px;
   cursor: pointer;
+  line-height: 28px;
+  appearance: none;
+  vertical-align: middle;
+}
+
+.legacy-filter:active,
+.legacy-refresh:hover {
+  background: var(--apple-canvas, #f5f5f7);
+}
+
+.legacy-filter:disabled,
+.legacy-refresh:disabled {
+  opacity: 0.75;
+  cursor: not-allowed;
+}
+
+.legacy-card {
+  position: relative;
+  border: 1px solid rgba(14, 18, 32, 0.06);
+  border-radius: 14px;
+  background: var(--apple-card, #ffffff);
+  box-shadow: 0 1px 2px rgba(14, 18, 32, 0.04), 0 0 0 1px rgba(14, 18, 32, 0.02);
+  min-width: 0;
+  overflow: hidden;
 }
 
-.aiaji-header {
+
+
+.legacy-job-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  border-bottom: 1px solid var(--aia-border, #e5e7eb);
-  padding-bottom: 12px;
+  flex-wrap: wrap;
+  padding: 22px 20px 14px;
+}
+
+.legacy-job-main {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+
+.legacy-job-name {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.legacy-job-main h2,
+.legacy-job-name {
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 17px;
+  line-height: 1.2;
+  font-weight: 500;
+  font-style: italic;
+  letter-spacing: 0.01em;
+  color: var(--apple-text, #101014);
+}
+
+.legacy-job-main h2::before,
+.legacy-job-name::before {
+  content: '';
+  width: 9px;
+  height: 9px;
+  border-radius: 999px;
+  flex: none;
+  background: var(--workspace-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--workspace-accent) 18%, transparent);
 }
 
-.aiaji-crumb {
+.legacy-lot {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--workspace-accent);
+  background: color-mix(in srgb, var(--workspace-accent) 6%, #ffffff);
+  border: 1px solid color-mix(in srgb, var(--workspace-accent) 14%, #ffffff);
+  border-radius: 10px;
+  padding: 5px 10px 5px 8px;
+  vertical-align: middle;
+  box-shadow: 0 1px 1px rgba(14, 18, 32, 0.03);
+}
+
+.legacy-lot-label {
+  color: var(--apple-muted, #62626b);
   font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+.legacy-lot-value {
+  color: var(--apple-text, #101014);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  letter-spacing: 0.02em;
 }
 
-.aiaji-state {
-  border: 1px solid var(--aia-border, #e5e7eb);
+.legacy-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 116px;
+  width: 116px;
+  height: 26px;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  line-height: 1;
   border-radius: 999px;
-  padding: 4px 12px;
-  color: var(--aia-accent, #2563eb);
+  border: 1px solid transparent;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.legacy-chip-default {
+  color: #5b6472;
+  background: #f1f3f7;
+  border-color: #e2e5ec;
+}
+
+/* Executing / Running → 主蓝 */
+.legacy-chip-executing {
+  color: #1d4ed8;
+  background: #e6efff;
+  border-color: color-mix(in srgb, #2563eb 12%, #ffffff);
+}
+
+/* Setup → 浅蓝 */
+.legacy-chip-setup {
+  color: #0369a1;
+  background: #eaf5fd;
+  border-color: color-mix(in srgb, #0ea5e9 14%, #ffffff);
+}
+
+.legacy-chip-complete {
+  color: #166534;
+  background: #ecfdf3;
+  border-color: #b7edd0;
+}
+
+/* ── card body: left carriers | timeline | right carriers ── */
+
+.legacy-body {
+  display: flex;
+  align-items: stretch;
+  gap: 18px;
+  padding: 22px 20px 24px;
+}
+
+.legacy-body > .legacy-carriers {
+  flex: 0 0 auto;
+}
+
+.legacy-body > .legacy-timeline {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.legacy-carriers {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 12px;
+  min-width: 0;
+  height: 124px;
+  padding: 14px 16px;
+  border: 1px solid rgba(14, 18, 32, 0.035);
+  border-radius: 12px;
+  background: #fbfbfc;
+  box-shadow:
+    0 0 0 1px rgba(14, 18, 32, 0.02),
+    0 1px 2px rgba(14, 18, 32, 0.02);
+}
+
+.legacy-carriers-out {
+  align-items: stretch;
+}
+
+.legacy-carriers-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: var(--apple-muted, #62626b);
+  white-space: nowrap;
+}
+
+.legacy-carriers-label::before {
+  content: '';
+  display: inline-block;
+  width: 3px;
+  height: 13px;
+  border-radius: 2px;
+  background: var(--workspace-accent);
 }
 
-.aiaji-carriers {
-  border: 1px solid var(--aia-border, #e5e7eb);
+.legacy-carriers-label::after {
+  content: '';
+  display: inline-block;
+  flex: 1;
+  min-width: 8px;
+  height: 0;
+  border-bottom: 2px dotted color-mix(in srgb, var(--workspace-border) 70%, #ffffff);
+}
+
+.legacy-carriers-list {
+  flex: 1;
+  min-width: 0;
+  max-width: 100%;
+  display: grid;
+  place-items: center;
+}
+
+.legacy-carrier-chip {
+  display: block;
+  max-width: 100%;
+  font-size: 12px;
+  color: var(--apple-text, #101014);
+  background: var(--apple-canvas, #f5f5f7);
+  border: 1px solid var(--workspace-border);
   border-radius: 8px;
-  padding: 12px;
+  padding: 3px 9px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.aiaji-carriers ul {
+.legacy-carrier-empty {
+  font-size: 12px;
+  color: var(--apple-muted, #9a9aa4);
+}
+
+.legacy-timeline {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr)) max-content;
+  list-style: none;
   margin: 0;
-  padding-left: 20px;
+  padding: 22px 18px 14px;
+  border: 1px solid rgba(14, 18, 32, 0.035);
+  border-radius: 12px;
+  background: #ffffff;
+  box-shadow:
+    0 0 0 1px rgba(14, 18, 32, 0.02),
+    0 1px 2px rgba(14, 18, 32, 0.02);
 }
 
-.aiaji-timeline ol {
+.legacy-timeline li {
+  min-width: 0;
+  position: relative;
   display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
+  flex-direction: column;
+  align-items: flex-start;
+  font-size: 12px;
+  animation: legacy-node-in 0.45s both;
 }
 
-.aiaji-timeline li {
-  border: 1px solid var(--aia-border, #e5e7eb);
-  border-radius: 999px;
-  padding: 6px 12px;
+.legacy-timeline li:nth-child(2) {
+  animation-delay: 0.06s;
+}
+.legacy-timeline li:nth-child(3) {
+  animation-delay: 0.12s;
+}
+.legacy-timeline li:nth-child(4) {
+  animation-delay: 0.18s;
+}
+.legacy-timeline li:nth-child(5) {
+  animation-delay: 0.24s;
 }
 
-.aiaji-timeline li.aiaji-active {
-  border-color: var(--aia-accent, #2563eb);
-  color: var(--aia-accent, #2563eb);
+@keyframes legacy-node-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
 }
 
-.aiaji-recipe {
+.legacy-timeline li::after {
+  content: '';
+  position: absolute;
+  height: 4px;
+  top: 16px;
+  left: 42px;
+  right: 6px;
+  border-radius: 2px;
+  background-image: repeating-linear-gradient(
+    90deg,
+    #dfe3ea 0 10px,
+    #e7ebf1 10px 20px
+  );
+  background-size: 20px 4px;
+}
+
+@keyframes legacy-connector-flow {
+  to {
+    background-position: 20px 0;
+  }
+}
+
+.legacy-timeline li:last-child::after {
+  display: none;
+}
+
+/* active → pending（即将进入）静态，蓝色弱条纹 */
+.legacy-step-active::after {
+  background-image: repeating-linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--workspace-accent) 55%, #ffffff) 0 10px,
+    color-mix(in srgb, var(--workspace-accent) 24%, #ffffff) 10px 20px
+  );
+}
+
+/* pending → pending 静态，中性灰条纹 */
+.legacy-step-pending::after {
+  background-image: repeating-linear-gradient(90deg, #dfe3ea 0 10px, #e7ebf1 10px 20px);
+}
+
+.legacy-step-symbol-empty::after {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: #c9cfda;
+}
+
+.legacy-step-symbol {
   display: grid;
-  gap: 10px;
-  border: 1px solid var(--aia-border, #e5e7eb);
-  border-radius: 8px;
-  padding: 12px;
+  place-items: center;
+  z-index: 1;
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  color: #526176;
+  background: #f3f5f9;
+  border: 1px solid rgba(14, 18, 32, 0.06);
+  box-shadow: 0 1px 1px rgba(14, 18, 32, 0.03);
+  margin-bottom: 9px;
+}
+
+.legacy-step-pending .legacy-step-symbol {
+  background: transparent;
+  border-color: rgba(14, 18, 32, 0.04);
+  color: #9aa3b2;
+  box-shadow: none;
+}
+
+/* done → green */
+.legacy-step-done .legacy-step-symbol {
+  color: #16a34a;
+  background: #ecfdf3;
+  border-color: #bbf3d1;
+}
+
+.legacy-step-done .legacy-step-label {
+  color: #15803d;
 }
 
-.aiaji-meta,
-.aiaji-recipe-row {
+.legacy-step-done::after {
+  background-image: repeating-linear-gradient(90deg, #8fd3ac 0 10px, #b9e6cc 10px 20px);
+  animation: legacy-connector-flow 1.1s linear infinite;
+}
+
+.legacy-step-duration {
+  position: absolute;
+  top: -12px;
+  left: calc(21px + (100% - 42px) / 2);
+  transform: translateX(-50%);
+  font-size: 10px;
+  line-height: 1.4;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  color: #15803d;
+  background: #f6fdf8;
+  border: 1px solid rgba(22, 163, 74, 0.16);
+  border-radius: 999px;
+  padding: 1px 8px;
+  box-shadow: 0 2px 4px rgba(21, 128, 61, 0.08);
+  white-space: nowrap;
+  z-index: 2;
+}
+
+.legacy-step-duration::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 100%;
+  width: 7px;
+  height: 7px;
+  background: #f6fdf8;
+  border-right: 1px solid #cfe8d8;
+  border-bottom: 1px solid #cfe8d8;
+  transform: translate(-50%, -3.5px) rotate(45deg);
+}
+
+.legacy-step-active .legacy-step-symbol {
+  color: var(--workspace-accent);
+  background: color-mix(in srgb, var(--workspace-accent) 8%, #ffffff);
+  border-color: color-mix(in srgb, var(--workspace-accent) 18%, #ffffff);
+  animation: legacy-pulse 2s ease-in-out infinite;
+}
+
+@keyframes legacy-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--workspace-accent) 6%, transparent);
+  }
+  50% {
+    box-shadow: 0 0 0 8px color-mix(in srgb, var(--workspace-accent) 10%, transparent);
+  }
+}
+
+.legacy-step-active .legacy-step-label {
+  color: var(--workspace-accent);
+}
+
+.legacy-step-pending .legacy-step-label {
+  color: #9aa3b2;
+}
+
+.legacy-step-label {
+  color: var(--apple-muted, #62626b);
+  line-height: 18px;
+  overflow-wrap: anywhere;
+}
+
+.legacy-step-time {
+  color: var(--apple-text, #101014);
+  font-variant-numeric: tabular-nums;
+  margin-top: 3px;
+}
+
+.legacy-step-time {
+  position: relative;
+}
+
+.legacy-step-time-hoverable {
+  cursor: default;
+  outline: 0;
+}
+
+.legacy-step-time-hoverable:hover .legacy-step-popover,
+.legacy-step-time-hoverable:focus-visible .legacy-step-popover,
+.legacy-step-time-hoverable:focus-within .legacy-step-popover {
+  opacity: 1;
+  visibility: visible;
+  transform: translate(-50%, 0);
+}
+
+.legacy-step-popover {
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 6px);
+  transform: translate(-50%, 4px);
+  background: #172033;
+  color: #ffffff;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  padding: 5px 9px;
+  border-radius: 7px;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 0.16s ease,
+    transform 0.16s ease,
+    visibility 0.16s;
+  pointer-events: none;
+  z-index: 5;
+}
+
+.legacy-step-popover::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 100%;
+  width: 7px;
+  height: 7px;
+  background: #172033;
+  transform: translateX(-50%) rotate(45deg) translate(-3px, -3px);
+}
+
+/* ── slim production progress strip ── */
+
+.legacy-progress {
   display: flex;
-  flex-wrap: wrap;
+  align-items: center;
   gap: 12px;
+  border-top: 1px solid var(--workspace-border);
+  padding: 14px 20px 16px;
+  font-size: 13px;
+  background: linear-gradient(90deg, #f9fafd 0%, #ffffff 45%);
+}
+
+.legacy-recipe-label {
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 8px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--apple-muted, #62626b);
 }
 
-.aiaji-recipe-name {
-  font-weight: 600;
+
+
+.legacy-recipe {
+  color: var(--apple-text, #101014);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.02em;
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 900px) {
+  .legacy-body {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .legacy-timeline {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .legacy-timeline li::after {
+    display: none;
+  }
 }

package/templates/JobInformation/resources/src/index.ts

@@ -1,9 +1,8 @@
 import { createApp, type App } from "vue";
 import DefaultPanel from "./defaults/DefaultPanel.vue";
-import { defaultSlots, slotOrder } from "./defaults/slots";
+import { defaultSlots } from "./defaults/slots";
 import { customization } from "./customization";
-import { createBus } from "./bus";
-import type { HostModuleContext, ModuleContext } from "./contract";
+import type { ModuleContext, HostModuleContext } from "./contract";
 import defaultStyles from "./defaults/styles.css?inline";
 
 let app: App | null = null;
@@ -16,28 +15,21 @@ function ensureStyles() {
   document.head.appendChild(styleElement);
 }
 
+/**
+ * The one entry point the host loads. Slot resolution happens inside the
+ * defaults; `customization.slots` may override any card region or leaf.
+ */
 export function mount(container: HTMLElement, context: HostModuleContext) {
   context.place({ kind: "route", path: "/jobs", label: "Jobs", order: 20 });
-
-  // One bus per mount: every slot component of this mount (built-in, custom,
-  // or full-mode) shares it via `context.bus`, and it dies on unmount.
-  const moduleContext: ModuleContext = { ...context, bus: createBus() };
-
-  if (customization.mode === "full") {
-    return customization.mount(container, moduleContext);
-  }
-
   ensureStyles();
-  const slots = { ...defaultSlots, ...(customization.slots ?? {}) };
-  app = createApp(DefaultPanel, { context: moduleContext, slots, slotOrder });
+
+  const moduleContext: ModuleContext = context;
+  const slotMap = { ...defaultSlots, ...(customization.slots ?? {}) };
+  app = createApp(DefaultPanel, { context: moduleContext, slotMap });
   app.mount(container);
 }
 
 export function unmount() {
-  if (customization.mode === "full") {
-    customization.unmount();
-    return;
-  }
   app?.unmount();
   app = null;
   styleElement?.remove();