@fses/workbench-app 0.2.0 → 0.2.2

package/node_modules/@fses/workbench-card/src/shell/workbenchVisualShell.ts

@@ -0,0 +1,228 @@
+/**
+ * @fileoverview 工作台视觉外壳工具 - 统一生成截图还原卡片的共性边框和强调样式
+ * @author seadon
+ * @created 2026-05-11
+ */
+
+import type { CSSProperties } from 'vue';
+
+export interface WorkbenchCommonShellVisual {
+  accentColor?: unknown;
+  backgroundColor?: unknown;
+  borderColor?: unknown;
+  textColor?: unknown;
+  cardRadius?: unknown;
+  cardShadow?: unknown;
+  customStyle?: unknown;
+}
+
+export type WorkbenchShellDensity = 'thumbnail' | 'compact' | 'standard' | 'expanded';
+
+/**
+ * Builds the shared visible left accent shell for screenshot-restored cards.
+ * @param accentColor - Accent color recognized from card appearance metadata.
+ * @returns CSS properties that keep the accent independent from the full border color.
+ */
+export function workbenchAccentShellStyle(accentColor?: string): Pick<CSSProperties, 'borderLeftColor' | 'borderLeftStyle' | 'borderLeftWidth'> {
+  return {
+    borderLeftColor: accentColor,
+    borderLeftStyle: accentColor ? 'solid' : undefined,
+    borderLeftWidth: accentColor ? '4px' : undefined,
+  };
+}
+
+/**
+ * Maps normalized visual shadow tokens to concrete CSS shadows.
+ * @param shadow - Visual shadow token.
+ * @returns CSS box-shadow value.
+ */
+export function workbenchShellShadowValue(shadow: unknown): string | undefined {
+  if (shadow === 'none') return 'none';
+  if (shadow === 'soft') return '0 10px 24px rgba(15, 23, 42, 0.10)';
+  if (shadow === 'standard') return '0 14px 34px rgba(15, 23, 42, 0.13)';
+  if (shadow === 'strong') return '0 22px 54px rgba(15, 23, 42, 0.18)';
+  return undefined;
+}
+
+/**
+ * Builds common card appearance CSS while keeping renderer body data separate.
+ * @param visual - Screenshot or registry appearance metadata.
+ * @param options - Optional background and CSS variable projection settings.
+ * @returns CSS properties for a card-like shell.
+ */
+export function workbenchCardShellStyle(
+  visual?: WorkbenchCommonShellVisual,
+  options: { background?: string; includeCssVariables?: boolean } = {},
+): CSSProperties {
+  const accentColor = typeof visual?.accentColor === 'string' ? visual.accentColor : undefined;
+  const rawBackgroundColor = options.background ?? (typeof visual?.backgroundColor === 'string' ? visual.backgroundColor : undefined);
+  const customStyle = customStyleRecord(visual?.customStyle);
+  const customBackground = customStyleRecord(customStyle.background);
+  const backgroundColor = backgroundWithOpacity(rawBackgroundColor, customBackground.opacity) ?? rawBackgroundColor;
+  const borderColor = typeof visual?.borderColor === 'string' ? visual.borderColor : accentColor;
+  const textColor = typeof visual?.textColor === 'string' ? visual.textColor : undefined;
+  const radius = typeof visual?.cardRadius === 'number' && Number.isFinite(visual.cardRadius) ? `${visual.cardRadius}px` : undefined;
+  const shadow = customShadowValue(customStyleRecord(customStyle.shadow)) ?? workbenchShellShadowValue(visual?.cardShadow);
+  const customBorder = customStyleRecord(customStyle.border);
+  const borderWidth = customBorderNumber(customBorder.width, 0, 4);
+  const borderStyle = customBorder.style === 'solid' || customBorder.style === 'dashed' ? customBorder.style : undefined;
+  const customTypography = customStyleRecord(customStyle.typography);
+  const titleFontSize = customBorderNumber(customTypography.titleFontSize, 12, 24);
+  const titleFontWeight = customFontWeight(customTypography.fontWeight);
+  return {
+    ...(options.includeCssVariables ? {
+      '--workbench-card-override-bg': backgroundColor,
+      '--workbench-card-override-border': borderColor,
+      '--workbench-card-override-text': textColor,
+      '--workbench-card-override-radius': radius,
+      '--workbench-card-override-shadow': shadow,
+      '--workbench-card-override-border-width': borderWidth === undefined ? undefined : `${borderWidth}px`,
+      '--workbench-card-override-border-style': borderStyle,
+      '--workbench-card-title-font-size': titleFontSize === undefined ? undefined : `${titleFontSize}px`,
+      '--workbench-card-title-font-weight': titleFontWeight === undefined ? undefined : String(titleFontWeight),
+    } as CSSProperties : {}),
+    backgroundColor,
+    borderColor,
+    color: textColor,
+    borderRadius: radius,
+    boxShadow: shadow,
+    borderWidth: borderWidth === undefined ? undefined : `${borderWidth}px`,
+    borderStyle,
+    ...workbenchAccentShellStyle(accentColor),
+  };
+}
+
+/**
+ * Reads a custom style record without trusting metadata shape.
+ * @param value - Candidate metadata value.
+ * @returns Record value or an empty record.
+ */
+function customStyleRecord(value: unknown): Record<string, unknown> {
+  return value && typeof value === 'object' && !Array.isArray(value)
+    ? value as Record<string, unknown>
+    : {};
+}
+
+/**
+ * Reads a bounded custom style number.
+ * @param value - Candidate numeric value.
+ * @param min - Minimum value.
+ * @param max - Maximum value.
+ * @returns Bounded number or undefined.
+ */
+function customBorderNumber(value: unknown, min: number, max: number): number | undefined {
+  const numeric = typeof value === 'number' ? value : typeof value === 'string' && value.trim() !== '' ? Number(value) : NaN;
+  if (!Number.isFinite(numeric)) return undefined;
+  return Math.min(max, Math.max(min, numeric));
+}
+
+/**
+ * Builds a custom shadow string from controlled style metadata.
+ * @param shadow - Sanitized or sanitize-able shadow metadata.
+ * @returns CSS box-shadow string or undefined.
+ */
+function customShadowValue(shadow: Record<string, unknown>): string | undefined {
+  const hasShadowField = ['color', 'opacity', 'blur', 'spread', 'offsetX', 'offsetY'].some((key) => shadow[key] !== undefined);
+  if (!hasShadowField) return undefined;
+  const color = parseColor(shadow.color) ?? { r: 15, g: 23, b: 42, a: 1 };
+  const opacity = customBorderNumber(shadow.opacity, 0, 0.5) ?? Math.min(color.a, 0.18);
+  const blur = customBorderNumber(shadow.blur, 0, 48) ?? 24;
+  const spread = customBorderNumber(shadow.spread, 0, 16) ?? 0;
+  const offsetX = customBorderNumber(shadow.offsetX, -24, 24) ?? 0;
+  const offsetY = customBorderNumber(shadow.offsetY, 0, 32) ?? 10;
+  return `${cssLength(offsetX)} ${cssLength(offsetY)} ${cssLength(blur)} ${cssLength(spread)} rgba(${color.r}, ${color.g}, ${color.b}, ${formatAlpha(opacity)})`;
+}
+
+/**
+ * Applies alpha to a solid background color.
+ * @param background - Current background value.
+ * @param opacity - Candidate opacity.
+ * @returns rgba background or undefined when background is not a solid color.
+ */
+function backgroundWithOpacity(background: string | undefined, opacity: unknown): string | undefined {
+  const alpha = customBorderNumber(opacity, 0.4, 1);
+  if (alpha === undefined || !background) return undefined;
+  const color = parseColor(background);
+  if (!color) return undefined;
+  return `rgba(${color.r}, ${color.g}, ${color.b}, ${formatAlpha(alpha)})`;
+}
+
+/**
+ * Parses supported solid colors.
+ * @param value - Candidate color value.
+ * @returns RGB channels and alpha, or undefined.
+ */
+function parseColor(value: unknown): { r: number; g: number; b: number; a: number } | undefined {
+  if (typeof value !== 'string') return undefined;
+  const color = value.trim();
+  const shortHexMatch = /^#([0-9a-fA-F]{3})$/u.exec(color);
+  if (shortHexMatch) {
+    const [r, g, b] = shortHexMatch[1].split('').map((part) => parseInt(`${part}${part}`, 16));
+    return { r, g, b, a: 1 };
+  }
+  const hexMatch = /^#([0-9a-fA-F]{6})$/u.exec(color);
+  if (hexMatch) {
+    const hex = hexMatch[1];
+    return {
+      r: parseInt(hex.slice(0, 2), 16),
+      g: parseInt(hex.slice(2, 4), 16),
+      b: parseInt(hex.slice(4, 6), 16),
+      a: 1,
+    };
+  }
+  const rgbMatch = /^rgba?\((.+)\)$/iu.exec(color);
+  if (!rgbMatch) return undefined;
+  const parts = rgbMatch[1].split(',').map((part) => part.trim());
+  if (parts.length !== 3 && parts.length !== 4) return undefined;
+  const channels = parts.slice(0, 3).map(Number);
+  if (channels.some((channel) => !Number.isFinite(channel) || channel < 0 || channel > 255)) return undefined;
+  const alpha = parts.length === 4 ? Number(parts[3]) : 1;
+  if (!Number.isFinite(alpha) || alpha < 0 || alpha > 1) return undefined;
+  return {
+    r: channels[0],
+    g: channels[1],
+    b: channels[2],
+    a: alpha,
+  };
+}
+
+/**
+ * Reads supported title font weights.
+ * @param value - Candidate font weight.
+ * @returns Supported font weight or undefined.
+ */
+function customFontWeight(value: unknown): 400 | 500 | 600 | 700 | undefined {
+  const numeric = typeof value === 'number' ? value : typeof value === 'string' ? Number(value) : NaN;
+  return numeric === 400 || numeric === 500 || numeric === 600 || numeric === 700 ? numeric : undefined;
+}
+
+/**
+ * Formats alpha without noisy trailing decimals.
+ * @param value - Alpha value.
+ * @returns CSS alpha fragment.
+ */
+function formatAlpha(value: number): string {
+  return Number(value.toFixed(3)).toString();
+}
+
+/**
+ * Formats a CSS length, keeping zero unitless.
+ * @param value - Numeric pixel value.
+ * @returns CSS length.
+ */
+function cssLength(value: number): string {
+  return value === 0 ? '0' : `${value}px`;
+}
+
+/**
+ * Builds shared density-aware shell spacing classes.
+ * @param density - Current card density.
+ * @param classes - Class pair for compact and roomy variants.
+ * @returns Compact or standard classes.
+ */
+export function workbenchShellDensityClasses(
+  density: WorkbenchShellDensity | string | undefined,
+  classes: { compact: string; standard: string },
+): string {
+  return density === 'thumbnail' || density === 'compact' ? classes.compact : classes.standard;
+}

package/node_modules/@fses/workbench-card/src/styles/workbench-card.css

@@ -0,0 +1,343 @@
+/**
+ * @fileoverview workbench-card base styles - shared style entry for reusable workbench card components.
+ * @author seadon
+ * @created 2026-05-20
+ */
+.fses-workbench-card-root {
+  box-sizing: border-box;
+}
+
+.workbench-card-ant-table,
+.workbench-card-ant-table .ant-spin-nested-loading,
+.workbench-card-ant-table .ant-spin-container,
+.workbench-card-ant-table .ant-table,
+.workbench-card-ant-table .ant-table-container {
+  height: 100%;
+  min-height: 0;
+}
+
+.workbench-card-ant-table .ant-table {
+  font-size: 12px;
+}
+
+.workbench-card-ant-table .ant-table-container {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.workbench-card-ant-table .ant-table-thead > tr > th {
+  padding: 6px 8px;
+  color: #667085;
+  background: #f7f8fa;
+  border-bottom-color: #eef1f6;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.workbench-card-ant-table .ant-table-tbody > tr > td {
+  padding: 6px 8px;
+  color: #344054;
+  border-bottom-color: #eef1f6;
+}
+
+.workbench-card-ant-table .ant-table-body {
+  height: auto !important;
+  min-height: 0;
+  max-height: none !important;
+  overflow: auto !important;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+}
+
+.workbench-custom-canvas-page-header {
+  box-sizing: border-box;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  overflow: hidden;
+  border-radius: 6px;
+}
+
+.workbench-custom-canvas-page-header__brand {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: 48px minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+  overflow: hidden;
+}
+
+.workbench-custom-canvas-page-header__logo {
+  width: 40px;
+  height: 40px;
+  font-size: 14px;
+}
+
+.workbench-custom-canvas-page-header__title {
+  font-size: 20px;
+  line-height: 24px;
+}
+
+.workbench-custom-canvas-page-header__subtitle {
+  margin-top: 2px;
+  font-size: 14px;
+  line-height: 18px;
+}
+
+.workbench-custom-canvas-page-header__actions {
+  max-width: 740px;
+}
+
+.workbench-custom-canvas-page-header__pill {
+  max-width: 192px;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 18px;
+}
+
+.workbench-custom-canvas-image {
+  min-height: 0;
+}
+
+.workbench-image-alert-ranking-row {
+  display: grid;
+  min-height: 28px;
+  grid-template-columns: 56px minmax(0, 1fr) 48px;
+  align-items: center;
+  column-gap: 16px;
+}
+
+.workbench-image-alert-ranking-severity {
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.workbench-image-alert-ranking-title,
+.workbench-image-alert-ranking-time {
+  align-self: center;
+  line-height: 20px;
+}
+
+.workbench-image-alert-ranking-time {
+  text-align: right;
+}
+
+.workbench-reference-panel-header {
+  display: grid;
+  height: 30px;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  overflow: hidden;
+}
+
+.workbench-reference-ops-panel,
+.workbench-reference-security-panel,
+.workbench-reference-asset-panel,
+.workbench-reference-project-panel,
+.workbench-reference-bid-collaboration-panel {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.workbench-reference-ops-panel {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 6px;
+}
+
+.workbench-reference-ops-left-column {
+  display: grid;
+  min-height: 0;
+  grid-template-rows: auto minmax(0, 0.58fr) minmax(0, 0.42fr);
+  gap: 4px;
+  overflow: hidden;
+}
+
+.workbench-reference-ops-right-column {
+  display: grid;
+  min-height: 0;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  gap: 4px;
+  overflow: hidden;
+}
+
+.workbench-reference-ops-service-list,
+.workbench-reference-ops-resource-list,
+.workbench-reference-ops-incident-list,
+.workbench-reference-ops-trend-card,
+.workbench-reference-security-score-card,
+.workbench-reference-security-score-main,
+.workbench-reference-security-score-metrics,
+.workbench-reference-security-risk-list,
+.workbench-reference-security-audit-list,
+.workbench-reference-security-account-list,
+.workbench-reference-security-compliance-list,
+.workbench-reference-asset-ledger-grid,
+.workbench-reference-asset-exception-list,
+.workbench-reference-cost-donut-card,
+.workbench-reference-cost-donut-ring,
+.workbench-reference-cost-list,
+.workbench-reference-project-progress-list,
+.workbench-reference-project-efficiency-list,
+.workbench-reference-project-todo-grid,
+.workbench-reference-project-quick-links,
+.workbench-reference-notice-list {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.workbench-reference-ops-service-list {
+  align-content: start;
+  grid-auto-rows: minmax(16px, 1fr);
+}
+
+.workbench-reference-ops-incident-list,
+.workbench-reference-security-risk-list {
+  align-content: start;
+  grid-auto-rows: minmax(20px, 1fr);
+}
+
+.workbench-reference-security-audit-list,
+.workbench-reference-security-account-list,
+.workbench-reference-security-compliance-list {
+  grid-auto-rows: minmax(24px, 1fr);
+}
+
+.workbench-reference-security-panel {
+  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
+  gap: 6px;
+}
+
+.workbench-reference-security-left-column {
+  display: grid;
+  min-height: 0;
+  grid-template-rows: auto minmax(84px, 0.58fr) minmax(72px, 0.42fr);
+  gap: 4px;
+  overflow: hidden;
+}
+
+.workbench-reference-security-right-column {
+  display: grid;
+  min-height: 0;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 4px;
+  overflow: hidden;
+}
+
+.workbench-reference-security-score-card {
+  display: grid;
+  height: 100%;
+  grid-template-columns: minmax(128px, 0.46fr) minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
+  gap: 0;
+}
+
+.workbench-reference-cost-donut-ring {
+  width: min(88px, 100%, calc(100cqh - 8px));
+  height: min(88px, 100%, calc(100cqh - 8px));
+  min-width: 28px;
+  min-height: 28px;
+}
+
+.workbench-reference-security-score-ring {
+  display: grid;
+  width: clamp(32px, 22%, 76px);
+  height: clamp(32px, 22%, 76px);
+}
+
+.workbench-reference-security-score-main {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  min-width: 0;
+}
+
+.workbench-reference-security-score-main strong {
+  font-size: 20px;
+  line-height: 20px;
+}
+
+.workbench-reference-security-score-metrics {
+  display: grid;
+  grid-template-rows: repeat(3, minmax(0, 1fr));
+  height: 100%;
+  min-height: 0;
+}
+
+.workbench-reference-security-score-metric {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  overflow: hidden;
+}
+
+.workbench-reference-asset-panel {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
+}
+
+.workbench-reference-asset-left-column {
+  display: grid;
+  min-height: 0;
+  grid-template-rows: auto minmax(0, 0.44fr) minmax(0, 0.56fr);
+  overflow: hidden;
+}
+
+.workbench-reference-asset-right-column {
+  display: grid;
+  min-height: 0;
+  grid-template-rows: auto minmax(0, 0.62fr) minmax(0, 0.38fr);
+  overflow: hidden;
+}
+
+.workbench-reference-cost-donut-card {
+  container-type: size;
+  column-gap: clamp(4px, 1cqh, 12px);
+  row-gap: 2px;
+}
+
+.workbench-reference-asset-value-pill {
+  max-height: 16px;
+  padding-top: 0;
+  padding-bottom: 0;
+  line-height: 14px;
+}
+
+.workbench-reference-project-panel {
+  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
+}
+
+.workbench-reference-project-left-column {
+  display: grid;
+  min-height: 0;
+  grid-template-rows: auto minmax(0, 0.68fr) minmax(0, 0.32fr);
+  overflow: hidden;
+}
+
+.workbench-reference-project-right-column {
+  display: grid;
+  min-height: 0;
+  grid-template-rows: auto minmax(0, 0.45fr) minmax(0, 0.28fr) minmax(0, 0.27fr);
+  overflow: hidden;
+}
+
+.workbench-reference-bid-collaboration-panel {
+  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto auto;
+  gap: 8px;
+}
+
+.workbench-reference-bid-hero {
+  min-height: 72px;
+}
+
+.workbench-reference-bid-risk-table {
+  min-height: 140px;
+}