@gadmin2n/schematics 0.0.110 → 0.0.111
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/dist/lib/application/files/gadmin2-game-angle-demo/config/ui/Event.ts +0 -12
- package/dist/lib/application/files/gadmin2-game-angle-demo/config/ui/ITActivityDay.ts +1 -1
- package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/dev-shell/DevShell.tsx +19 -0
- package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/dev-shell/OnboardingModal.tsx +101 -0
- package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/dev-shell/style.css +129 -0
- package/package.json +1 -1
|
@@ -30,18 +30,11 @@ export const Event: ModelConfig = {
|
|
|
30
30
|
fields: [
|
|
31
31
|
"*",
|
|
32
32
|
"!created_at",
|
|
33
|
-
"!businessRequester",
|
|
34
|
-
"!number",
|
|
35
|
-
"!additionalInfo",
|
|
36
|
-
"!snSysId",
|
|
37
|
-
"!oitOwner",
|
|
38
33
|
"!createdAt",
|
|
39
34
|
"!endDate",
|
|
40
35
|
"!creator",
|
|
41
36
|
"!updatedAt",
|
|
42
37
|
"!startDate",
|
|
43
|
-
"!eventType",
|
|
44
|
-
"!country",
|
|
45
38
|
],
|
|
46
39
|
rowSelection: {
|
|
47
40
|
actions: [
|
|
@@ -86,11 +79,6 @@ export const Event: ModelConfig = {
|
|
|
86
79
|
fields: [
|
|
87
80
|
"*",
|
|
88
81
|
"!created_at",
|
|
89
|
-
"!businessRequester",
|
|
90
|
-
"!number",
|
|
91
|
-
"!additionalInfo",
|
|
92
|
-
"!snSysId",
|
|
93
|
-
"!oitOwner",
|
|
94
82
|
"!createdAt",
|
|
95
83
|
"!endDate",
|
|
96
84
|
"!creator",
|
|
@@ -27,7 +27,7 @@ export const ITActivityDay: ModelConfig = {
|
|
|
27
27
|
filter: [],
|
|
28
28
|
sorter: ["id"],
|
|
29
29
|
},
|
|
30
|
-
fields: ["*", "!createdAt", "!updatedAt"
|
|
30
|
+
fields: ["*", "!createdAt", "!updatedAt"],
|
|
31
31
|
rowSelection: {
|
|
32
32
|
actions: [
|
|
33
33
|
{ action: "DELETE", desc: "Delete" },
|
|
@@ -10,12 +10,15 @@ import AddDataModal from './AddDataModal';
|
|
|
10
10
|
import AddPageModal from './AddPageModal';
|
|
11
11
|
import DeleteDataConfirm from './DeleteDataConfirm';
|
|
12
12
|
import EditDataModal from './EditDataModal';
|
|
13
|
+
import OnboardingModal from './OnboardingModal';
|
|
13
14
|
import { resolvePagePaths } from '../components/agentPanel/pagePathUtils';
|
|
14
15
|
import SkillMenu from './SkillMenu';
|
|
15
16
|
import { agentAllowedPromise } from '../config/agentAllowed';
|
|
16
17
|
import './style.css';
|
|
17
18
|
import UndoConfirm from './UndoConfirm';
|
|
18
19
|
|
|
20
|
+
const ONBOARDING_KEY = 'gadmin-onboarded';
|
|
21
|
+
|
|
19
22
|
declare global {
|
|
20
23
|
interface Window {
|
|
21
24
|
ChatSDK: any;
|
|
@@ -82,6 +85,9 @@ function DevShellInner() {
|
|
|
82
85
|
const [modal, setModal] = useState<ModalType>(null);
|
|
83
86
|
const [isDataMngtPage, setIsDataMngtPage] = useState(false);
|
|
84
87
|
const [pageType, setPageType] = useState<string>('');
|
|
88
|
+
const [showOnboarding, setShowOnboarding] = useState(
|
|
89
|
+
() => !localStorage.getItem(ONBOARDING_KEY),
|
|
90
|
+
);
|
|
85
91
|
const pageContextRef = useRef<PageContext | null>(null);
|
|
86
92
|
const inspectorSendDepthRef = useRef(0);
|
|
87
93
|
|
|
@@ -475,6 +481,19 @@ function DevShellInner() {
|
|
|
475
481
|
/>
|
|
476
482
|
|
|
477
483
|
{/* Modals */}
|
|
484
|
+
{showOnboarding && (
|
|
485
|
+
<OnboardingModal
|
|
486
|
+
onAddData={() => {
|
|
487
|
+
localStorage.setItem(ONBOARDING_KEY, '1');
|
|
488
|
+
setShowOnboarding(false);
|
|
489
|
+
setModal('addData');
|
|
490
|
+
}}
|
|
491
|
+
onDismiss={() => {
|
|
492
|
+
localStorage.setItem(ONBOARDING_KEY, '1');
|
|
493
|
+
setShowOnboarding(false);
|
|
494
|
+
}}
|
|
495
|
+
/>
|
|
496
|
+
)}
|
|
478
497
|
{modal === 'undo' && (
|
|
479
498
|
<UndoConfirm
|
|
480
499
|
onConfirm={(prompt) => {
|
package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/dev-shell/OnboardingModal.tsx
ADDED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
|
|
3
|
+
interface Props {
|
|
4
|
+
onAddData: () => void;
|
|
5
|
+
onDismiss: () => void;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
const CAPABILITIES = [
|
|
9
|
+
{
|
|
10
|
+
icon: '🗄️',
|
|
11
|
+
title: '管理数据表',
|
|
12
|
+
desc: '用自然语言描述业务数据，AI 自动生成数据库和完整的数据管理页面',
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
icon: '✏️',
|
|
16
|
+
title: '所见即所得定制',
|
|
17
|
+
desc: 'Inspector模式下，点击数据管理页面任意元素，告诉 AI 要改什么，立即生效',
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
icon: '📊',
|
|
21
|
+
title: '新建 Dashboard',
|
|
22
|
+
desc: '在 Canvas 画布上拖拽搭建数据可视化看板，完成后一键发布到导航菜单',
|
|
23
|
+
},
|
|
24
|
+
];
|
|
25
|
+
|
|
26
|
+
export default function OnboardingModal({ onAddData, onDismiss }: Props) {
|
|
27
|
+
const [step, setStep] = useState<1 | 2>(1);
|
|
28
|
+
|
|
29
|
+
return (
|
|
30
|
+
<div id="onboarding-overlay">
|
|
31
|
+
<div id="onboarding-card">
|
|
32
|
+
{step === 1 ? (
|
|
33
|
+
<>
|
|
34
|
+
<div className="onboarding-header">
|
|
35
|
+
<div className="onboarding-welcome-icon">👋</div>
|
|
36
|
+
<h2 className="onboarding-title">欢迎使用 AI+ Ops Admin</h2>
|
|
37
|
+
<p className="onboarding-subtitle">
|
|
38
|
+
这里是你的 AI 驱动开发环境，你可以做这些事：
|
|
39
|
+
</p>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<div className="onboarding-caps">
|
|
43
|
+
{CAPABILITIES.map((cap) => (
|
|
44
|
+
<div key={cap.title} className="onboarding-cap-card">
|
|
45
|
+
<div className="onboarding-cap-icon">{cap.icon}</div>
|
|
46
|
+
<div className="onboarding-cap-title">{cap.title}</div>
|
|
47
|
+
<div className="onboarding-cap-desc">{cap.desc}</div>
|
|
48
|
+
</div>
|
|
49
|
+
))}
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<div className="onboarding-footer">
|
|
53
|
+
<button className="add-data-btn-cancel" onClick={onDismiss}>
|
|
54
|
+
我已了解，跳过
|
|
55
|
+
</button>
|
|
56
|
+
<button
|
|
57
|
+
className="add-data-btn-confirm"
|
|
58
|
+
onClick={() => setStep(2)}
|
|
59
|
+
>
|
|
60
|
+
下一步：如何开始 →
|
|
61
|
+
</button>
|
|
62
|
+
</div>
|
|
63
|
+
</>
|
|
64
|
+
) : (
|
|
65
|
+
<>
|
|
66
|
+
<div className="onboarding-step2-body">
|
|
67
|
+
<div className="onboarding-step2-icon">🚀</div>
|
|
68
|
+
<h3 className="onboarding-step2-title">开始旅程：添加数据表</h3>
|
|
69
|
+
<p className="onboarding-step2-desc">
|
|
70
|
+
数据表是一切的基础。描述你要管理什么业务数据，AI
|
|
71
|
+
会自动设计数据库结构，并同步生成完整的管理页面。
|
|
72
|
+
<br />
|
|
73
|
+
<br />
|
|
74
|
+
有了数据表之后，你就可以用 Inspector 点击页面元素进行定制， 或在
|
|
75
|
+
Canvas 上搭建可视化看板。
|
|
76
|
+
</p>
|
|
77
|
+
<div className="onboarding-step2-hint">
|
|
78
|
+
💡 之后随时可以通过右下角菜单「添加数据表」重新触发
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<div className="onboarding-footer">
|
|
83
|
+
<button
|
|
84
|
+
className="add-data-btn-cancel"
|
|
85
|
+
onClick={() => setStep(1)}
|
|
86
|
+
>
|
|
87
|
+
← 返回
|
|
88
|
+
</button>
|
|
89
|
+
<button className="add-data-btn-cancel" onClick={onDismiss}>
|
|
90
|
+
先跳过
|
|
91
|
+
</button>
|
|
92
|
+
<button className="add-data-btn-confirm" onClick={onAddData}>
|
|
93
|
+
立即添加数据表
|
|
94
|
+
</button>
|
|
95
|
+
</div>
|
|
96
|
+
</>
|
|
97
|
+
)}
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
);
|
|
101
|
+
}
|
|
@@ -833,3 +833,132 @@ div.chat-header {
|
|
|
833
833
|
opacity: 1;
|
|
834
834
|
transform: translateY(-50%) scale(1);
|
|
835
835
|
}
|
|
836
|
+
|
|
837
|
+
/* ── Onboarding Modal ────────────────────────────────────────────────────── */
|
|
838
|
+
#onboarding-overlay {
|
|
839
|
+
position: fixed;
|
|
840
|
+
inset: 0;
|
|
841
|
+
z-index: 999999;
|
|
842
|
+
background: rgba(0, 0, 0, 0.5);
|
|
843
|
+
display: flex;
|
|
844
|
+
align-items: center;
|
|
845
|
+
justify-content: center;
|
|
846
|
+
}
|
|
847
|
+
|
|
848
|
+
#onboarding-card {
|
|
849
|
+
background: #fff;
|
|
850
|
+
border-radius: 16px;
|
|
851
|
+
width: 600px;
|
|
852
|
+
max-width: calc(100vw - 32px);
|
|
853
|
+
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.22);
|
|
854
|
+
display: flex;
|
|
855
|
+
flex-direction: column;
|
|
856
|
+
overflow: hidden;
|
|
857
|
+
}
|
|
858
|
+
|
|
859
|
+
.onboarding-header {
|
|
860
|
+
padding: 32px 32px 20px;
|
|
861
|
+
text-align: center;
|
|
862
|
+
}
|
|
863
|
+
|
|
864
|
+
.onboarding-welcome-icon {
|
|
865
|
+
font-size: 36px;
|
|
866
|
+
line-height: 1;
|
|
867
|
+
margin-bottom: 12px;
|
|
868
|
+
}
|
|
869
|
+
|
|
870
|
+
.onboarding-title {
|
|
871
|
+
font-size: 18px;
|
|
872
|
+
font-weight: 700;
|
|
873
|
+
color: #1a1a1a;
|
|
874
|
+
margin: 0 0 8px;
|
|
875
|
+
}
|
|
876
|
+
|
|
877
|
+
.onboarding-subtitle {
|
|
878
|
+
font-size: 13px;
|
|
879
|
+
color: #8c8c8c;
|
|
880
|
+
margin: 0;
|
|
881
|
+
}
|
|
882
|
+
|
|
883
|
+
.onboarding-caps {
|
|
884
|
+
display: flex;
|
|
885
|
+
gap: 12px;
|
|
886
|
+
padding: 0 32px 24px;
|
|
887
|
+
}
|
|
888
|
+
|
|
889
|
+
.onboarding-cap-card {
|
|
890
|
+
flex: 1;
|
|
891
|
+
display: flex;
|
|
892
|
+
flex-direction: column;
|
|
893
|
+
align-items: center;
|
|
894
|
+
gap: 6px;
|
|
895
|
+
padding: 20px 12px;
|
|
896
|
+
border: 1.5px solid #f0f0f0;
|
|
897
|
+
border-radius: 12px;
|
|
898
|
+
background: #fafafa;
|
|
899
|
+
text-align: center;
|
|
900
|
+
}
|
|
901
|
+
|
|
902
|
+
.onboarding-cap-icon {
|
|
903
|
+
font-size: 28px;
|
|
904
|
+
line-height: 1;
|
|
905
|
+
}
|
|
906
|
+
|
|
907
|
+
.onboarding-cap-title {
|
|
908
|
+
font-size: 13px;
|
|
909
|
+
font-weight: 600;
|
|
910
|
+
color: #1a1a1a;
|
|
911
|
+
}
|
|
912
|
+
|
|
913
|
+
.onboarding-cap-desc {
|
|
914
|
+
font-size: 12px;
|
|
915
|
+
color: #8c8c8c;
|
|
916
|
+
line-height: 1.5;
|
|
917
|
+
}
|
|
918
|
+
|
|
919
|
+
.onboarding-footer {
|
|
920
|
+
display: flex;
|
|
921
|
+
gap: 8px;
|
|
922
|
+
justify-content: flex-end;
|
|
923
|
+
padding: 16px 32px 24px;
|
|
924
|
+
border-top: 1px solid #f0f0f0;
|
|
925
|
+
}
|
|
926
|
+
|
|
927
|
+
/* Step 2 */
|
|
928
|
+
.onboarding-step2-body {
|
|
929
|
+
padding: 32px 40px 24px;
|
|
930
|
+
text-align: center;
|
|
931
|
+
display: flex;
|
|
932
|
+
flex-direction: column;
|
|
933
|
+
align-items: center;
|
|
934
|
+
gap: 12px;
|
|
935
|
+
}
|
|
936
|
+
|
|
937
|
+
.onboarding-step2-icon {
|
|
938
|
+
font-size: 44px;
|
|
939
|
+
line-height: 1;
|
|
940
|
+
}
|
|
941
|
+
|
|
942
|
+
.onboarding-step2-title {
|
|
943
|
+
font-size: 17px;
|
|
944
|
+
font-weight: 700;
|
|
945
|
+
color: #1a1a1a;
|
|
946
|
+
margin: 0;
|
|
947
|
+
}
|
|
948
|
+
|
|
949
|
+
.onboarding-step2-desc {
|
|
950
|
+
font-size: 13px;
|
|
951
|
+
color: #595959;
|
|
952
|
+
line-height: 1.7;
|
|
953
|
+
margin: 0;
|
|
954
|
+
max-width: 440px;
|
|
955
|
+
}
|
|
956
|
+
|
|
957
|
+
.onboarding-step2-hint {
|
|
958
|
+
font-size: 12px;
|
|
959
|
+
color: #8c8c8c;
|
|
960
|
+
background: #f5f5f5;
|
|
961
|
+
border-radius: 8px;
|
|
962
|
+
padding: 10px 16px;
|
|
963
|
+
margin-top: 4px;
|
|
964
|
+
}
|