@demokit-ui/demokit 0.1.2 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +44 -0
- package/dist/app/tweak-panel.d.ts +2 -1
- package/dist/app/tweak-panel.js +165 -93
- package/dist/config/settings.config.js +1 -0
- package/dist/config/types.d.ts +58 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +826 -812
- package/dist/kit/themes/adaptive-theme-panel.d.ts +14 -0
- package/dist/kit/themes/adaptive-theme-panel.js +196 -0
- package/dist/kit/themes/adaptive-theme.d.ts +54 -0
- package/dist/kit/themes/adaptive-theme.js +377 -0
- package/dist/kit/themes/theme-toggle.js +25 -15
- package/dist/kit/tokens/chart-palette.js +6 -6
- package/dist/providers/demokit-provider.d.ts +5 -2
- package/dist/providers/demokit-provider.js +8 -5
- package/dist/providers/settings-provider.d.ts +10 -2
- package/dist/providers/settings-provider.js +98 -55
- package/package.json +1 -1
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ComponentProps, ReactNode } from 'react';
|
|
2
|
+
import { PopoverContent } from '../components';
|
|
3
|
+
export interface AdaptiveThemePanelProps {
|
|
4
|
+
triggerLabel?: ReactNode;
|
|
5
|
+
triggerTitle?: string;
|
|
6
|
+
title?: ReactNode;
|
|
7
|
+
description?: ReactNode;
|
|
8
|
+
side?: ComponentProps<typeof PopoverContent>['side'];
|
|
9
|
+
align?: ComponentProps<typeof PopoverContent>['align'];
|
|
10
|
+
sideOffset?: ComponentProps<typeof PopoverContent>['sideOffset'];
|
|
11
|
+
triggerClassName?: string;
|
|
12
|
+
contentClassName?: string;
|
|
13
|
+
}
|
|
14
|
+
export declare function AdaptiveThemePanel({ triggerLabel, triggerTitle, title, description, side, align, sideOffset, triggerClassName, contentClassName, }: AdaptiveThemePanelProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
import { jsxs as t, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { useState as k } from "react";
|
|
3
|
+
import { Bot as A, Sparkles as R, FileCode2 as T, Trash2 as C } from "lucide-react";
|
|
4
|
+
import { cn as p } from "../../lib/utils.js";
|
|
5
|
+
import { useSettings as D } from "../../providers/settings-provider.js";
|
|
6
|
+
import { createAdaptiveThemeFromResearch as P } from "./adaptive-theme.js";
|
|
7
|
+
import { Popover as S, PopoverTrigger as w, PopoverContent as z } from "../components/feedback/popover/popover.js";
|
|
8
|
+
import { Button as m } from "../components/form/button/button.js";
|
|
9
|
+
const E = {
|
|
10
|
+
source: "agent",
|
|
11
|
+
query: "根据 PRD:为中国人寿建设客户经营 CRM,面向销售团队做线索、商机、跟进和经营看板。",
|
|
12
|
+
customer: "中国人寿",
|
|
13
|
+
project: "客户经营 CRM",
|
|
14
|
+
industry: "finance",
|
|
15
|
+
tone: "premium",
|
|
16
|
+
brandColor: "#0066b3",
|
|
17
|
+
confidence: "high",
|
|
18
|
+
summary: "开发 Agent 在读取 PRD 和客户语境后,生成面向金融保险后台的低噪声客户经营主题。",
|
|
19
|
+
evidence: [
|
|
20
|
+
"PRD 指向销售团队的线索、商机、跟进和经营看板,属于高频业务后台。",
|
|
21
|
+
"客户为大型保险金融机构,界面风格应强调可信、稳定、层级清晰。",
|
|
22
|
+
"主题 token 使用蓝色作为主色,状态色和图表色保持克制,避免营销页式大面积品牌铺色。"
|
|
23
|
+
],
|
|
24
|
+
designReferences: [
|
|
25
|
+
{
|
|
26
|
+
name: "Awesome DESIGN.md / enterprise SaaS reference",
|
|
27
|
+
url: "https://github.com/VoltAgent/awesome-design-md",
|
|
28
|
+
reason: "从公开 DESIGN.md 集合中选取相近的企业后台 / B2B SaaS 设计语言作为结构、密度和组件风格参考。"
|
|
29
|
+
}
|
|
30
|
+
],
|
|
31
|
+
sources: [
|
|
32
|
+
{
|
|
33
|
+
title: "PRD / 创建项目意图",
|
|
34
|
+
note: "由开发 Agent 在创建项目阶段读取,不由运行时 UI 采集。"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
title: "Agent 品牌与行业调研",
|
|
38
|
+
note: "由 Codex / Cursor 等开发 Agent 使用自身搜索和推理能力完成。"
|
|
39
|
+
}
|
|
40
|
+
]
|
|
41
|
+
};
|
|
42
|
+
function O({
|
|
43
|
+
triggerLabel: s = "AI 主题",
|
|
44
|
+
triggerTitle: o = "展示 Agent 生成的客户主题产物",
|
|
45
|
+
title: g = "Agent 主题产物",
|
|
46
|
+
description: l = "主题调研发生在 Codex / Cursor 等开发 Agent 的 PRD / 创建项目阶段;DemoKit 只接收 token,生成后进入 Tweak 微调。",
|
|
47
|
+
side: h = "top",
|
|
48
|
+
align: x = "end",
|
|
49
|
+
sideOffset: v = 10,
|
|
50
|
+
triggerClassName: f,
|
|
51
|
+
contentClassName: b
|
|
52
|
+
}) {
|
|
53
|
+
const { settings: i, storeOption: a } = D(), [d, c] = k(null), u = i.adaptiveTheme, N = () => {
|
|
54
|
+
const r = P(E);
|
|
55
|
+
c(r.research), a("adaptiveTheme", r.profile), a("theme", "adaptive");
|
|
56
|
+
}, y = () => {
|
|
57
|
+
c(null), a("adaptiveTheme", null), i.theme === "adaptive" && a("theme", "glass");
|
|
58
|
+
};
|
|
59
|
+
return /* @__PURE__ */ t(S, { children: [
|
|
60
|
+
/* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ t(
|
|
61
|
+
m,
|
|
62
|
+
{
|
|
63
|
+
type: "button",
|
|
64
|
+
variant: "ghost",
|
|
65
|
+
size: "sm",
|
|
66
|
+
shape: "circle",
|
|
67
|
+
title: o,
|
|
68
|
+
className: p(
|
|
69
|
+
"h-8 gap-1.5 rounded-full px-3 text-xs text-foreground/80 hover:bg-muted hover:text-foreground",
|
|
70
|
+
i.theme === "adaptive" && "bg-primary/10 text-primary",
|
|
71
|
+
f
|
|
72
|
+
),
|
|
73
|
+
children: [
|
|
74
|
+
/* @__PURE__ */ e(A, { className: "size-3.5" }),
|
|
75
|
+
s
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
) }),
|
|
79
|
+
/* @__PURE__ */ e(
|
|
80
|
+
z,
|
|
81
|
+
{
|
|
82
|
+
align: x,
|
|
83
|
+
side: h,
|
|
84
|
+
sideOffset: v,
|
|
85
|
+
className: p(
|
|
86
|
+
"w-[400px] rounded-[var(--dk-radius-card)] p-3",
|
|
87
|
+
b
|
|
88
|
+
),
|
|
89
|
+
children: /* @__PURE__ */ t("div", { className: "space-y-4", children: [
|
|
90
|
+
/* @__PURE__ */ t("div", { className: "min-w-0", children: [
|
|
91
|
+
/* @__PURE__ */ t("div", { className: "flex items-center gap-2 text-sm font-semibold text-foreground", children: [
|
|
92
|
+
/* @__PURE__ */ e(R, { className: "size-4 text-primary" }),
|
|
93
|
+
g
|
|
94
|
+
] }),
|
|
95
|
+
l && /* @__PURE__ */ e("div", { className: "mt-1 text-xs leading-5 text-muted-foreground", children: l })
|
|
96
|
+
] }),
|
|
97
|
+
/* @__PURE__ */ t("div", { className: "rounded-[var(--dk-radius-card)] border border-border bg-muted/40 p-2.5", children: [
|
|
98
|
+
/* @__PURE__ */ e("div", { className: "text-[11px] font-medium text-muted-foreground", children: "当前 Agent 主题" }),
|
|
99
|
+
/* @__PURE__ */ t("div", { className: "mt-1 flex items-center gap-2", children: [
|
|
100
|
+
/* @__PURE__ */ e(
|
|
101
|
+
"span",
|
|
102
|
+
{
|
|
103
|
+
className: "size-3 shrink-0 rounded-full",
|
|
104
|
+
style: {
|
|
105
|
+
background: u?.tokens.primary ?? "var(--muted)"
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
),
|
|
109
|
+
/* @__PURE__ */ e("span", { className: "min-w-0 truncate text-xs font-semibold text-foreground", children: u?.name ?? "未生成" })
|
|
110
|
+
] })
|
|
111
|
+
] }),
|
|
112
|
+
/* @__PURE__ */ t("div", { className: "rounded-[var(--dk-radius-card)] border border-border bg-card px-3 py-2.5 text-xs leading-5 text-muted-foreground", children: [
|
|
113
|
+
/* @__PURE__ */ e("div", { className: "font-medium text-foreground", children: "真实链路" }),
|
|
114
|
+
/* @__PURE__ */ e("div", { className: "mt-1", children: "PRD / 项目意图 → 开发 Agent 调研客户和行业 → 写入 adaptiveTheme token → DemoKitProvider 应用 → Tweak override。" })
|
|
115
|
+
] }),
|
|
116
|
+
/* @__PURE__ */ t("div", { className: "flex items-center justify-between gap-2", children: [
|
|
117
|
+
/* @__PURE__ */ t(
|
|
118
|
+
m,
|
|
119
|
+
{
|
|
120
|
+
type: "button",
|
|
121
|
+
size: "sm",
|
|
122
|
+
className: "gap-1.5",
|
|
123
|
+
onClick: N,
|
|
124
|
+
children: [
|
|
125
|
+
/* @__PURE__ */ e(T, { className: "size-3.5" }),
|
|
126
|
+
"导入 Agent 示例产物"
|
|
127
|
+
]
|
|
128
|
+
}
|
|
129
|
+
),
|
|
130
|
+
/* @__PURE__ */ t(
|
|
131
|
+
m,
|
|
132
|
+
{
|
|
133
|
+
type: "button",
|
|
134
|
+
size: "sm",
|
|
135
|
+
variant: "ghost",
|
|
136
|
+
className: "gap-1.5",
|
|
137
|
+
onClick: y,
|
|
138
|
+
children: [
|
|
139
|
+
/* @__PURE__ */ e(C, { className: "size-3.5" }),
|
|
140
|
+
"清除"
|
|
141
|
+
]
|
|
142
|
+
}
|
|
143
|
+
)
|
|
144
|
+
] }),
|
|
145
|
+
d && /* @__PURE__ */ t("div", { className: "space-y-2 border-t border-border pt-3", children: [
|
|
146
|
+
/* @__PURE__ */ e("div", { className: "text-xs font-medium text-muted-foreground", children: "Agent 产物摘要" }),
|
|
147
|
+
/* @__PURE__ */ t("div", { className: "grid grid-cols-2 gap-2 text-xs", children: [
|
|
148
|
+
/* @__PURE__ */ e(n, { label: "客户", value: d.customer }),
|
|
149
|
+
/* @__PURE__ */ e(n, { label: "项目", value: d.project }),
|
|
150
|
+
/* @__PURE__ */ e(n, { label: "行业", value: d.industry }),
|
|
151
|
+
/* @__PURE__ */ e(n, { label: "品牌色", value: d.brandColor })
|
|
152
|
+
] }),
|
|
153
|
+
d.summary && /* @__PURE__ */ e("div", { className: "text-[11px] leading-5 text-muted-foreground", children: d.summary }),
|
|
154
|
+
d.designReferences && /* @__PURE__ */ t("div", { className: "space-y-1 rounded-[var(--dk-radius-control)] border border-border bg-card px-2.5 py-2", children: [
|
|
155
|
+
/* @__PURE__ */ e("div", { className: "text-[10px] font-medium text-muted-foreground", children: "DESIGN.md 参考" }),
|
|
156
|
+
d.designReferences.map((r) => /* @__PURE__ */ t(
|
|
157
|
+
"div",
|
|
158
|
+
{
|
|
159
|
+
className: "text-[11px] leading-5 text-muted-foreground",
|
|
160
|
+
children: [
|
|
161
|
+
/* @__PURE__ */ e("span", { className: "font-medium text-foreground", children: r.name }),
|
|
162
|
+
":",
|
|
163
|
+
r.reason
|
|
164
|
+
]
|
|
165
|
+
},
|
|
166
|
+
`${r.name}-${r.url ?? ""}`
|
|
167
|
+
))
|
|
168
|
+
] }),
|
|
169
|
+
/* @__PURE__ */ e("ul", { className: "space-y-1 text-[11px] leading-5 text-muted-foreground", children: d.evidence.map((r) => /* @__PURE__ */ e("li", { children: r }, r)) }),
|
|
170
|
+
d.sources && /* @__PURE__ */ e("div", { className: "space-y-1 rounded-[var(--dk-radius-control)] border border-border bg-muted/30 px-2.5 py-2", children: d.sources.map((r) => /* @__PURE__ */ t(
|
|
171
|
+
"div",
|
|
172
|
+
{
|
|
173
|
+
className: "text-[11px] leading-5 text-muted-foreground",
|
|
174
|
+
children: [
|
|
175
|
+
/* @__PURE__ */ e("span", { className: "font-medium text-foreground", children: r.title }),
|
|
176
|
+
r.note && `:${r.note}`
|
|
177
|
+
]
|
|
178
|
+
},
|
|
179
|
+
`${r.title}-${r.url ?? r.note ?? ""}`
|
|
180
|
+
)) }),
|
|
181
|
+
/* @__PURE__ */ e("div", { className: "rounded-[var(--dk-radius-control)] bg-primary/10 px-2.5 py-2 text-[11px] leading-5 text-primary", children: "已写入 adaptiveTheme。后续颜色、密度、圆角在 Tweak 里调整并保留为 override。" })
|
|
182
|
+
] })
|
|
183
|
+
] })
|
|
184
|
+
}
|
|
185
|
+
)
|
|
186
|
+
] });
|
|
187
|
+
}
|
|
188
|
+
function n({ label: s, value: o }) {
|
|
189
|
+
return /* @__PURE__ */ t("div", { className: "rounded-[var(--dk-radius-control)] border border-border bg-card px-2.5 py-2", children: [
|
|
190
|
+
/* @__PURE__ */ e("div", { className: "text-[10px] text-muted-foreground", children: s }),
|
|
191
|
+
/* @__PURE__ */ e("div", { className: "mt-0.5 truncate font-semibold text-foreground", children: o })
|
|
192
|
+
] });
|
|
193
|
+
}
|
|
194
|
+
export {
|
|
195
|
+
O as AdaptiveThemePanel
|
|
196
|
+
};
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { AdaptiveThemeIndustry, AdaptiveThemeProfile, AdaptiveThemeTokens, AdaptiveThemeTone } from '../../config/types';
|
|
2
|
+
export interface GenerateAdaptiveThemeInput {
|
|
3
|
+
name?: string;
|
|
4
|
+
customer?: string;
|
|
5
|
+
project?: string;
|
|
6
|
+
industry?: AdaptiveThemeIndustry;
|
|
7
|
+
tone?: AdaptiveThemeTone;
|
|
8
|
+
brandColor?: string;
|
|
9
|
+
description?: string;
|
|
10
|
+
}
|
|
11
|
+
export type AdaptiveThemeEditableColor = 'primary' | 'success' | 'warning' | 'info' | 'background' | 'border';
|
|
12
|
+
export interface AdaptiveThemeResearch {
|
|
13
|
+
source: 'agent' | 'manual' | 'demo';
|
|
14
|
+
query: string;
|
|
15
|
+
customer: string;
|
|
16
|
+
project: string;
|
|
17
|
+
industry: AdaptiveThemeIndustry;
|
|
18
|
+
tone: AdaptiveThemeTone;
|
|
19
|
+
brandColor: string;
|
|
20
|
+
confidence: 'low' | 'medium' | 'high';
|
|
21
|
+
summary?: string;
|
|
22
|
+
evidence: string[];
|
|
23
|
+
designReferences?: Array<{
|
|
24
|
+
name: string;
|
|
25
|
+
url?: string;
|
|
26
|
+
reason: string;
|
|
27
|
+
}>;
|
|
28
|
+
sources?: Array<{
|
|
29
|
+
title: string;
|
|
30
|
+
url?: string;
|
|
31
|
+
note?: string;
|
|
32
|
+
}>;
|
|
33
|
+
}
|
|
34
|
+
export interface AdaptiveThemeSuggestion {
|
|
35
|
+
research: AdaptiveThemeResearch;
|
|
36
|
+
profile: AdaptiveThemeProfile;
|
|
37
|
+
}
|
|
38
|
+
export declare const ADAPTIVE_THEME_INDUSTRIES: Array<{
|
|
39
|
+
value: AdaptiveThemeIndustry;
|
|
40
|
+
label: string;
|
|
41
|
+
}>;
|
|
42
|
+
export declare const ADAPTIVE_THEME_TONES: Array<{
|
|
43
|
+
value: AdaptiveThemeTone;
|
|
44
|
+
label: string;
|
|
45
|
+
}>;
|
|
46
|
+
export declare const ADAPTIVE_THEME_CSS_VARIABLES: string[];
|
|
47
|
+
export declare function generateAdaptiveTheme(input?: GenerateAdaptiveThemeInput): AdaptiveThemeProfile;
|
|
48
|
+
export declare function createAdaptiveThemeFromResearch(research: AdaptiveThemeResearch): AdaptiveThemeSuggestion;
|
|
49
|
+
export declare function suggestAdaptiveThemeFromPrompt(prompt: string): AdaptiveThemeSuggestion;
|
|
50
|
+
export declare function getAdaptiveThemeCssVariables(theme: AdaptiveThemeProfile | AdaptiveThemeTokens | null | undefined): Record<string, string>;
|
|
51
|
+
export declare function updateAdaptiveThemeColor(profile: AdaptiveThemeProfile, token: AdaptiveThemeEditableColor, color: string): AdaptiveThemeProfile;
|
|
52
|
+
export declare function applyAdaptiveTheme(element: HTMLElement, theme: AdaptiveThemeProfile | AdaptiveThemeTokens | null | undefined): void;
|
|
53
|
+
export declare function clearAdaptiveTheme(element: HTMLElement): void;
|
|
54
|
+
export declare function serializeAdaptiveThemeCss(theme: AdaptiveThemeProfile | AdaptiveThemeTokens): string;
|
|
@@ -0,0 +1,377 @@
|
|
|
1
|
+
const T = [
|
|
2
|
+
{ value: "generic", label: "通用企业" },
|
|
3
|
+
{ value: "finance", label: "金融" },
|
|
4
|
+
{ value: "healthcare", label: "医疗" },
|
|
5
|
+
{ value: "manufacturing", label: "制造" },
|
|
6
|
+
{ value: "energy", label: "能源" },
|
|
7
|
+
{ value: "government", label: "政务" },
|
|
8
|
+
{ value: "education", label: "教育" },
|
|
9
|
+
{ value: "retail", label: "零售" }
|
|
10
|
+
], R = [
|
|
11
|
+
{ value: "professional", label: "专业" },
|
|
12
|
+
{ value: "calm", label: "克制" },
|
|
13
|
+
{ value: "vivid", label: "活跃" },
|
|
14
|
+
{ value: "premium", label: "高端" }
|
|
15
|
+
], h = {
|
|
16
|
+
generic: {
|
|
17
|
+
primary: "#2563eb",
|
|
18
|
+
chart: ["#7c3aed", "#0d9488", "#f97316", "#e11d48", "#0891b2"],
|
|
19
|
+
success: "#15803d",
|
|
20
|
+
warning: "#c2410c",
|
|
21
|
+
info: "#0369a1"
|
|
22
|
+
},
|
|
23
|
+
finance: {
|
|
24
|
+
primary: "#1d4ed8",
|
|
25
|
+
chart: ["#7c3aed", "#0891b2", "#f97316", "#be123c", "#0d9488"],
|
|
26
|
+
success: "#15803d",
|
|
27
|
+
warning: "#b45309",
|
|
28
|
+
info: "#0369a1"
|
|
29
|
+
},
|
|
30
|
+
healthcare: {
|
|
31
|
+
primary: "#0d9488",
|
|
32
|
+
chart: ["#2563eb", "#65a30d", "#f59e0b", "#e11d48", "#0891b2"],
|
|
33
|
+
success: "#16a34a",
|
|
34
|
+
warning: "#d97706",
|
|
35
|
+
info: "#0284c7"
|
|
36
|
+
},
|
|
37
|
+
manufacturing: {
|
|
38
|
+
primary: "#475569",
|
|
39
|
+
chart: ["#2563eb", "#0f766e", "#ea580c", "#dc2626", "#7c3aed"],
|
|
40
|
+
success: "#15803d",
|
|
41
|
+
warning: "#c2410c",
|
|
42
|
+
info: "#0369a1"
|
|
43
|
+
},
|
|
44
|
+
energy: {
|
|
45
|
+
primary: "#0f766e",
|
|
46
|
+
chart: ["#2563eb", "#84cc16", "#f59e0b", "#dc2626", "#0891b2"],
|
|
47
|
+
success: "#15803d",
|
|
48
|
+
warning: "#d97706",
|
|
49
|
+
info: "#0284c7"
|
|
50
|
+
},
|
|
51
|
+
government: {
|
|
52
|
+
primary: "#1e40af",
|
|
53
|
+
chart: ["#0f766e", "#7c3aed", "#c2410c", "#be123c", "#0369a1"],
|
|
54
|
+
success: "#166534",
|
|
55
|
+
warning: "#a16207",
|
|
56
|
+
info: "#075985"
|
|
57
|
+
},
|
|
58
|
+
education: {
|
|
59
|
+
primary: "#7c3aed",
|
|
60
|
+
chart: ["#2563eb", "#0d9488", "#f59e0b", "#e11d48", "#0891b2"],
|
|
61
|
+
success: "#16a34a",
|
|
62
|
+
warning: "#d97706",
|
|
63
|
+
info: "#2563eb"
|
|
64
|
+
},
|
|
65
|
+
retail: {
|
|
66
|
+
primary: "#db2777",
|
|
67
|
+
chart: ["#7c3aed", "#2563eb", "#f97316", "#0d9488", "#e11d48"],
|
|
68
|
+
success: "#16a34a",
|
|
69
|
+
warning: "#f97316",
|
|
70
|
+
info: "#2563eb"
|
|
71
|
+
}
|
|
72
|
+
}, E = {
|
|
73
|
+
professional: {
|
|
74
|
+
background: "#f5f7fa",
|
|
75
|
+
foreground: "#0f172a",
|
|
76
|
+
muted: "#f1f5f9",
|
|
77
|
+
surfaceShadow: "none",
|
|
78
|
+
decorOpacity: "0",
|
|
79
|
+
decorNavyOpacity: "1",
|
|
80
|
+
lightMix: 0.88
|
|
81
|
+
},
|
|
82
|
+
calm: {
|
|
83
|
+
background: "#f8fafc",
|
|
84
|
+
foreground: "#111827",
|
|
85
|
+
muted: "#f3f6f9",
|
|
86
|
+
surfaceShadow: "0 1px 2px rgba(15, 23, 42, 0.04)",
|
|
87
|
+
decorOpacity: "0",
|
|
88
|
+
decorNavyOpacity: "1",
|
|
89
|
+
lightMix: 0.91
|
|
90
|
+
},
|
|
91
|
+
vivid: {
|
|
92
|
+
background: "#f7fbff",
|
|
93
|
+
foreground: "#181c32",
|
|
94
|
+
muted: "#eef6ff",
|
|
95
|
+
surfaceShadow: "0 1px 2px rgba(24, 28, 50, 0.04)",
|
|
96
|
+
decorOpacity: "1",
|
|
97
|
+
decorNavyOpacity: "0",
|
|
98
|
+
lightMix: 0.9
|
|
99
|
+
},
|
|
100
|
+
premium: {
|
|
101
|
+
background: "#f4f5f7",
|
|
102
|
+
foreground: "#111827",
|
|
103
|
+
muted: "#eef2f7",
|
|
104
|
+
surfaceShadow: "0 12px 32px rgba(15, 23, 42, 0.08)",
|
|
105
|
+
decorOpacity: "0",
|
|
106
|
+
decorNavyOpacity: "1",
|
|
107
|
+
lightMix: 0.86
|
|
108
|
+
}
|
|
109
|
+
}, y = {
|
|
110
|
+
background: "--background",
|
|
111
|
+
foreground: "--foreground",
|
|
112
|
+
card: "--card",
|
|
113
|
+
cardForeground: "--card-foreground",
|
|
114
|
+
popover: "--popover",
|
|
115
|
+
popoverForeground: "--popover-foreground",
|
|
116
|
+
primary: "--primary",
|
|
117
|
+
primaryHover: "--primary-hover",
|
|
118
|
+
primaryLight: "--primary-light",
|
|
119
|
+
primaryForeground: "--primary-foreground",
|
|
120
|
+
secondary: "--secondary",
|
|
121
|
+
secondaryForeground: "--secondary-foreground",
|
|
122
|
+
muted: "--muted",
|
|
123
|
+
mutedForeground: "--muted-foreground",
|
|
124
|
+
accent: "--accent",
|
|
125
|
+
accentForeground: "--accent-foreground",
|
|
126
|
+
destructive: "--destructive",
|
|
127
|
+
destructiveLight: "--destructive-light",
|
|
128
|
+
destructiveForeground: "--destructive-foreground",
|
|
129
|
+
success: "--success",
|
|
130
|
+
successLight: "--success-light",
|
|
131
|
+
successForeground: "--success-foreground",
|
|
132
|
+
warning: "--warning",
|
|
133
|
+
warningLight: "--warning-light",
|
|
134
|
+
warningForeground: "--warning-foreground",
|
|
135
|
+
info: "--info",
|
|
136
|
+
infoLight: "--info-light",
|
|
137
|
+
infoForeground: "--info-foreground",
|
|
138
|
+
mono: "--mono",
|
|
139
|
+
monoForeground: "--mono-foreground",
|
|
140
|
+
border: "--border",
|
|
141
|
+
input: "--input",
|
|
142
|
+
ring: "--ring",
|
|
143
|
+
surfaceBg: "--surface-bg",
|
|
144
|
+
surfaceBorder: "--surface-border",
|
|
145
|
+
surfaceBlur: "--surface-blur",
|
|
146
|
+
surfaceShadow: "--surface-shadow",
|
|
147
|
+
decorOpacity: "--decor-opacity",
|
|
148
|
+
decorNavyOpacity: "--decor-navy-opacity"
|
|
149
|
+
}, A = [
|
|
150
|
+
...Object.values(y),
|
|
151
|
+
"--chart-1",
|
|
152
|
+
"--chart-2",
|
|
153
|
+
"--chart-3",
|
|
154
|
+
"--chart-4",
|
|
155
|
+
"--chart-5",
|
|
156
|
+
"--chart-6"
|
|
157
|
+
];
|
|
158
|
+
function O(e = {}) {
|
|
159
|
+
const n = e.industry ?? "generic", c = e.tone ?? "professional", r = h[n], o = E[c], t = p(e.brandColor) ?? r.primary, i = o.foreground, d = a(t, "#e2e8f0", 0.86), u = a(i, "#ffffff", 0.46), g = a(i, "#ffffff", 0.22), l = {
|
|
160
|
+
background: a(t, o.background, 0.96),
|
|
161
|
+
foreground: i,
|
|
162
|
+
card: "#ffffff",
|
|
163
|
+
cardForeground: i,
|
|
164
|
+
popover: "#ffffff",
|
|
165
|
+
popoverForeground: i,
|
|
166
|
+
primary: t,
|
|
167
|
+
primaryHover: w(t, -0.1),
|
|
168
|
+
primaryLight: a(t, "#ffffff", o.lightMix),
|
|
169
|
+
primaryForeground: f(t),
|
|
170
|
+
secondary: o.muted,
|
|
171
|
+
secondaryForeground: g,
|
|
172
|
+
muted: o.muted,
|
|
173
|
+
mutedForeground: u,
|
|
174
|
+
accent: a(t, "#ffffff", 0.92),
|
|
175
|
+
accentForeground: i,
|
|
176
|
+
destructive: "#b91c1c",
|
|
177
|
+
destructiveLight: "#fee2e2",
|
|
178
|
+
destructiveForeground: "#ffffff",
|
|
179
|
+
success: r.success,
|
|
180
|
+
successLight: a(r.success, "#ffffff", 0.88),
|
|
181
|
+
successForeground: f(r.success),
|
|
182
|
+
warning: r.warning,
|
|
183
|
+
warningLight: a(r.warning, "#ffffff", 0.88),
|
|
184
|
+
warningForeground: f(r.warning),
|
|
185
|
+
info: r.info,
|
|
186
|
+
infoLight: a(r.info, "#ffffff", 0.88),
|
|
187
|
+
infoForeground: f(r.info),
|
|
188
|
+
mono: i,
|
|
189
|
+
monoForeground: "#ffffff",
|
|
190
|
+
border: d,
|
|
191
|
+
input: a(t, "#e2e8f0", 0.9),
|
|
192
|
+
ring: t,
|
|
193
|
+
chart: [t, ...r.chart],
|
|
194
|
+
surfaceBg: "#ffffff",
|
|
195
|
+
surfaceBorder: d,
|
|
196
|
+
surfaceBlur: "0px",
|
|
197
|
+
surfaceShadow: o.surfaceShadow,
|
|
198
|
+
decorOpacity: o.decorOpacity,
|
|
199
|
+
decorNavyOpacity: o.decorNavyOpacity
|
|
200
|
+
};
|
|
201
|
+
return {
|
|
202
|
+
name: s(e.name) ?? [s(e.customer), s(e.project), "自适配主题"].filter(Boolean).join(" · "),
|
|
203
|
+
customer: s(e.customer),
|
|
204
|
+
project: s(e.project),
|
|
205
|
+
industry: n,
|
|
206
|
+
tone: c,
|
|
207
|
+
brandColor: t,
|
|
208
|
+
description: s(e.description),
|
|
209
|
+
generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
|
|
210
|
+
tokens: l,
|
|
211
|
+
notes: [
|
|
212
|
+
"AI 层只输出主题 token,组件和页面结构保持不变。",
|
|
213
|
+
"人工调整会作为 override 写回 adaptiveTheme.tokens。",
|
|
214
|
+
"切回内置主题时会清除自适配 CSS 变量。"
|
|
215
|
+
]
|
|
216
|
+
};
|
|
217
|
+
}
|
|
218
|
+
function C(e) {
|
|
219
|
+
const n = O({
|
|
220
|
+
name: `${e.customer} · ${e.project} · AI 自适配主题`,
|
|
221
|
+
customer: e.customer,
|
|
222
|
+
project: e.project,
|
|
223
|
+
industry: e.industry,
|
|
224
|
+
tone: e.tone,
|
|
225
|
+
brandColor: e.brandColor,
|
|
226
|
+
description: e.summary ?? e.query
|
|
227
|
+
});
|
|
228
|
+
return {
|
|
229
|
+
research: e,
|
|
230
|
+
profile: {
|
|
231
|
+
...n,
|
|
232
|
+
notes: [
|
|
233
|
+
...n.notes,
|
|
234
|
+
"主题调研由开发 Agent 在 PRD / 创建项目阶段完成,运行时只接收结构化 token。"
|
|
235
|
+
]
|
|
236
|
+
}
|
|
237
|
+
};
|
|
238
|
+
}
|
|
239
|
+
function N(e) {
|
|
240
|
+
const n = e.trim(), c = n.toLowerCase(), r = n.includes("中国人寿") || n.includes("国寿") || c.includes("china life"), o = r || n.includes("银行") || n.includes("保险") || n.includes("金融") || c.includes("finance") || c.includes("bank") || c.includes("insurance"), t = n.includes("能源") || n.includes("电力") || n.includes("新能源") || c.includes("energy"), i = n.includes("医疗") || n.includes("医院") || c.includes("health"), d = n.includes("政务") || n.includes("政府") || n.includes("国企"), u = t ? "energy" : i ? "healthcare" : d ? "government" : o ? "finance" : "generic", g = M(n), l = r ? "中国人寿" : L(n) ?? "客户项目", S = {
|
|
241
|
+
source: "demo",
|
|
242
|
+
query: n || "企业项目",
|
|
243
|
+
customer: l,
|
|
244
|
+
project: g,
|
|
245
|
+
industry: u,
|
|
246
|
+
tone: o || d ? "premium" : "professional",
|
|
247
|
+
brandColor: (r ? "#0066b3" : t ? "#0f766e" : i ? "#0d9488" : void 0) ?? h[u].primary,
|
|
248
|
+
confidence: r ? "high" : n ? "medium" : "low",
|
|
249
|
+
evidence: r ? [
|
|
250
|
+
"识别到“中国人寿 / 国寿”客户实体。",
|
|
251
|
+
"演示规则将其归为金融保险机构,界面应偏稳重、可信、低噪声。",
|
|
252
|
+
"演示规则使用蓝色作为主色,金色/绿色作为辅助点缀,避免大面积高饱和铺色。"
|
|
253
|
+
] : [
|
|
254
|
+
`从输入中识别出${j(u)}行业语义。`,
|
|
255
|
+
"优先采用企业后台可读性更高的低饱和背景与清晰边界。",
|
|
256
|
+
"保留后续人工微调入口,但不要求用户先配置参数。"
|
|
257
|
+
]
|
|
258
|
+
};
|
|
259
|
+
return {
|
|
260
|
+
...C(S)
|
|
261
|
+
};
|
|
262
|
+
}
|
|
263
|
+
function v(e) {
|
|
264
|
+
if (!e) return {};
|
|
265
|
+
const n = "tokens" in e ? e.tokens : e, c = {};
|
|
266
|
+
return Object.entries(y).forEach(([r, o]) => {
|
|
267
|
+
c[o] = n[r];
|
|
268
|
+
}), n.chart.forEach((r, o) => {
|
|
269
|
+
c[`--chart-${o + 1}`] = r;
|
|
270
|
+
}), c;
|
|
271
|
+
}
|
|
272
|
+
function _(e, n, c) {
|
|
273
|
+
const r = p(c);
|
|
274
|
+
if (!r) return e;
|
|
275
|
+
const o = { ...e.tokens };
|
|
276
|
+
return n === "primary" ? (o.primary = r, o.primaryHover = w(r, -0.1), o.primaryLight = a(r, "#ffffff", 0.88), o.primaryForeground = f(r), o.ring = r, o.accent = a(r, "#ffffff", 0.92), o.chart = [
|
|
277
|
+
r,
|
|
278
|
+
...o.chart.slice(1)
|
|
279
|
+
]) : n === "success" ? (o.success = r, o.successLight = a(r, "#ffffff", 0.88), o.successForeground = f(r)) : n === "warning" ? (o.warning = r, o.warningLight = a(r, "#ffffff", 0.88), o.warningForeground = f(r)) : n === "info" ? (o.info = r, o.infoLight = a(r, "#ffffff", 0.88), o.infoForeground = f(r)) : n === "background" ? o.background = r : n === "border" && (o.border = r, o.input = r, o.surfaceBorder = r), {
|
|
280
|
+
...e,
|
|
281
|
+
brandColor: n === "primary" ? r : e.brandColor,
|
|
282
|
+
generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
|
|
283
|
+
tokens: o
|
|
284
|
+
};
|
|
285
|
+
}
|
|
286
|
+
function B(e, n) {
|
|
287
|
+
x(e);
|
|
288
|
+
const c = v(n);
|
|
289
|
+
Object.entries(c).forEach(([r, o]) => {
|
|
290
|
+
e.style.setProperty(r, o);
|
|
291
|
+
}), Object.keys(c).length > 0 && (e.dataset.adaptiveTheme = "true");
|
|
292
|
+
}
|
|
293
|
+
function x(e) {
|
|
294
|
+
A.forEach((n) => {
|
|
295
|
+
e.style.removeProperty(n);
|
|
296
|
+
}), delete e.dataset.adaptiveTheme;
|
|
297
|
+
}
|
|
298
|
+
function H(e) {
|
|
299
|
+
return Object.entries(v(e)).map(([n, c]) => `${n}: ${c};`).join(`
|
|
300
|
+
`);
|
|
301
|
+
}
|
|
302
|
+
function s(e) {
|
|
303
|
+
const n = e?.trim();
|
|
304
|
+
return n || void 0;
|
|
305
|
+
}
|
|
306
|
+
function L(e) {
|
|
307
|
+
const n = [
|
|
308
|
+
/(?:给|为|帮)([^,,。;;\s]{2,16})(?:做|搭|建|实现|设计)/,
|
|
309
|
+
/([^,,。;;\s]{2,16})(?:项目|系统|平台|CRM|crm)/
|
|
310
|
+
];
|
|
311
|
+
for (const c of n) {
|
|
312
|
+
const r = e.match(c);
|
|
313
|
+
if (r?.[1]) return r[1];
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
function M(e) {
|
|
317
|
+
return /CRM|crm|客户/.test(e) ? "客户经营 CRM" : /ERP|erp/.test(e) ? "企业 ERP" : /运营|推广/.test(e) ? "运营管理平台" : /数据|看板|BI|bi/.test(e) ? "数据驾驶舱" : /门户|官网/.test(e) ? "企业服务门户" : "企业业务系统";
|
|
318
|
+
}
|
|
319
|
+
function j(e) {
|
|
320
|
+
return T.find((n) => n.value === e)?.label ?? "通用企业";
|
|
321
|
+
}
|
|
322
|
+
function p(e) {
|
|
323
|
+
if (!e) return;
|
|
324
|
+
const c = e.trim().match(/^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/);
|
|
325
|
+
if (!c) return;
|
|
326
|
+
const r = c[1];
|
|
327
|
+
return `#${(r.length === 3 ? r.split("").map((t) => t + t).join("") : r).toLowerCase()}`;
|
|
328
|
+
}
|
|
329
|
+
function a(e, n, c) {
|
|
330
|
+
const r = m(e), o = m(n);
|
|
331
|
+
return I({
|
|
332
|
+
r: Math.round(r.r * (1 - c) + o.r * c),
|
|
333
|
+
g: Math.round(r.g * (1 - c) + o.g * c),
|
|
334
|
+
b: Math.round(r.b * (1 - c) + o.b * c)
|
|
335
|
+
});
|
|
336
|
+
}
|
|
337
|
+
function w(e, n) {
|
|
338
|
+
return a(e, "#000000", Math.abs(n));
|
|
339
|
+
}
|
|
340
|
+
function f(e) {
|
|
341
|
+
return k(e, "#ffffff") >= 4.5 ? "#ffffff" : "#0f172a";
|
|
342
|
+
}
|
|
343
|
+
function k(e, n) {
|
|
344
|
+
const c = b(e), r = b(n), o = Math.max(c, r), t = Math.min(c, r);
|
|
345
|
+
return (o + 0.05) / (t + 0.05);
|
|
346
|
+
}
|
|
347
|
+
function b(e) {
|
|
348
|
+
const { r: n, g: c, b: r } = m(e), o = [n, c, r].map((t) => {
|
|
349
|
+
const i = t / 255;
|
|
350
|
+
return i <= 0.03928 ? i / 12.92 : Math.pow((i + 0.055) / 1.055, 2.4);
|
|
351
|
+
});
|
|
352
|
+
return o[0] * 0.2126 + o[1] * 0.7152 + o[2] * 0.0722;
|
|
353
|
+
}
|
|
354
|
+
function m(e) {
|
|
355
|
+
const c = (p(e) ?? "#2563eb").slice(1);
|
|
356
|
+
return {
|
|
357
|
+
r: parseInt(c.slice(0, 2), 16),
|
|
358
|
+
g: parseInt(c.slice(2, 4), 16),
|
|
359
|
+
b: parseInt(c.slice(4, 6), 16)
|
|
360
|
+
};
|
|
361
|
+
}
|
|
362
|
+
function I({ r: e, g: n, b: c }) {
|
|
363
|
+
return `#${[e, n, c].map((r) => r.toString(16).padStart(2, "0")).join("")}`;
|
|
364
|
+
}
|
|
365
|
+
export {
|
|
366
|
+
A as ADAPTIVE_THEME_CSS_VARIABLES,
|
|
367
|
+
T as ADAPTIVE_THEME_INDUSTRIES,
|
|
368
|
+
R as ADAPTIVE_THEME_TONES,
|
|
369
|
+
B as applyAdaptiveTheme,
|
|
370
|
+
x as clearAdaptiveTheme,
|
|
371
|
+
C as createAdaptiveThemeFromResearch,
|
|
372
|
+
O as generateAdaptiveTheme,
|
|
373
|
+
v as getAdaptiveThemeCssVariables,
|
|
374
|
+
H as serializeAdaptiveThemeCss,
|
|
375
|
+
N as suggestAdaptiveThemeFromPrompt,
|
|
376
|
+
_ as updateAdaptiveThemeColor
|
|
377
|
+
};
|