Skip to content

Commit cc1532b

Browse files
ZhaoJiSenfeng626
ZhaoJiSen
authored and
feng626
committed
fix: chat style; login check; asset auto connect
1 parent 56e0925 commit cc1532b

11 files changed

Lines changed: 14763 additions & 10116 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ luna.tar.gz
4747
luna/
4848
package-lock.json
4949
.angular
50+
.yarn
5051

5152
# generated at build time by scripts/generate-build-info.mjs
5253
/src/environments/build-info.ts

‎.yarnrc.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
nodeLinker: node-modules

‎src/app/elements/chat/chat.component.html‎

Lines changed: 42 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,46 @@
1-
<div id="chatContainer" class="chat-container">
2-
<nz-float-button-group [hidden]="chatAIShown">
3-
@if(isShowSetting && subViews.length === 1) {
4-
<nz-float-button (click)="handleShowDrawer()" [nzIcon]="setting"></nz-float-button>
5-
}
6-
<nz-float-button (click)="showChatAI()" [hidden]="!chatAiApiEnabled" [nzIcon]="customer"> </nz-float-button>
7-
</nz-float-button-group>
8-
<ng-template #setting>
9-
<nz-icon nzTheme="outline" nzType="setting" />
10-
</ng-template>
11-
<ng-template #customer>
12-
<img alt="" class="chat-img" src="assets/icons/chat-ai.png" />
13-
</ng-template>
1+
<div class="chat-overlay-root">
2+
<div #launcher [hidden]="chatAIShown" [ngStyle]="launcherStyle" class="chat-launcher">
3+
<button
4+
(keydown)="onLauncherKeydown($event)"
5+
(lostpointercapture)="onLauncherLostPointerCapture($event)"
6+
(pointerdown)="onLauncherPointerDown($event)"
7+
[class.dragging]="isDragging"
8+
aria-label="移动浮动工具栏"
9+
class="chat-drag-handle"
10+
type="button"
11+
>
12+
<nz-icon nzTheme="outline" nzType="holder" />
13+
</button>
1414

15-
<div *ngIf="chatAiApiEnabled" [style.display]="chatAIShown ? 'block' : 'none'" class="drawer-panel">
15+
<div class="chat-action-group">
16+
@if (isShowSetting && subViews.length === 1) {
17+
<button
18+
(click)="handleShowDrawer()"
19+
aria-label="打开设置"
20+
class="chat-action-button"
21+
type="button"
22+
>
23+
<nz-icon nzTheme="outline" nzType="setting" />
24+
</button>
25+
}
26+
<button
27+
(click)="showChatAI()"
28+
[hidden]="!chatAiApiEnabled"
29+
aria-label="打开智能问答"
30+
class="chat-action-button"
31+
type="button"
32+
>
33+
<img alt="" class="chat-img" src="assets/icons/chat-ai.png" />
34+
</button>
35+
</div>
36+
</div>
37+
38+
<div
39+
*ngIf="chatAiApiEnabled"
40+
[class.chat-panel-expanded]="chatPanelExpanded"
41+
[style.display]="chatAIShown ? 'block' : 'none'"
42+
class="chat-panel"
43+
>
1644
<div class="content">
1745
<iframe
1846
#contentWindow
@@ -25,16 +53,3 @@
2553
</div>
2654
</div>
2755
</div>
28-
29-
<!-- <div [hidden]="!showBtn || chatAIShown || !isShowSetting" id="dragBox"> -->
30-
<!-- <div -->
31-
<!-- (click)="onSettingOpenDrawer()" -->
32-
<!-- [hidden]="!isShowSetting || subViews.length > 1" -->
33-
<!-- class="drag-setting" -->
34-
<!-- > -->
35-
<!-- <i class="fa fa-cog"></i> -->
36-
<!-- </div> -->
37-
<!-- <div (click)="showChatAI()" [hidden]="!chatAiEnabled" class="robot-button"> -->
38-
<!-- <img alt="" class="chat-img" src="assets/icons/chat-ai.png"/> -->
39-
<!-- </div> -->
40-
<!-- </div> -->

‎src/app/elements/chat/chat.component.scss‎

Lines changed: 120 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,147 @@
1-
nz-float-button-group,
2-
nz-float-button {
3-
position: absolute;
4-
right: 1px;
5-
top: 0;
1+
:host {
2+
pointer-events: none;
63
}
74

8-
.chat-container {
5+
.chat-overlay-root {
96
position: fixed;
10-
bottom: 200px;
11-
right: 9px;
7+
inset: 0;
128
z-index: 99999;
13-
cursor: move;
14-
user-select: none;
15-
overflow: visible;
16-
padding: 10px 0;
9+
pointer-events: none;
10+
}
11+
12+
.chat-launcher {
13+
position: absolute;
1714
display: flex;
1815
flex-direction: column;
19-
align-items: flex-end;
16+
align-items: center;
17+
gap: 2px;
18+
width: 40px;
19+
padding: 4px;
20+
border-radius: 20px;
21+
color: rgba(255, 255, 255, 0.5);
22+
background: rgba(255, 255, 255, 0.05);
23+
box-shadow: none;
24+
pointer-events: auto;
25+
user-select: none;
26+
z-index: 1;
27+
}
2028

21-
.content {
22-
height: 100%;
23-
iframe {
24-
border: none;
25-
}
29+
.chat-drag-handle,
30+
.chat-action-button {
31+
display: flex;
32+
align-items: center;
33+
justify-content: center;
34+
width: 32px;
35+
height: 28px;
36+
padding: 0;
37+
border: 0;
38+
border-radius: 12.5px;
39+
color: rgba(255, 255, 255, 0.5);
40+
background: transparent;
41+
cursor: pointer;
42+
transition:
43+
color 0.16s ease,
44+
background 0.16s ease;
45+
46+
&:hover,
47+
&:focus-visible {
48+
color: #fff;
49+
background: rgba(255, 255, 255, 0.08);
2650
}
51+
}
2752

28-
.drawer-panel {
29-
background-color: transparent;
30-
position: fixed;
31-
top: 0;
32-
right: 440px;
33-
width: 440px;
34-
min-width: 260px;
35-
height: 100vh;
36-
user-select: none;
37-
border-radius: 10px 0 0 10px;
38-
transition: transform 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
39-
box-shadow: 0 0 8px 4px #00000014;
40-
transform: translate(100%);
41-
z-index: 1000;
42-
opacity: 0.95;
53+
.chat-drag-handle {
54+
cursor: grab;
55+
touch-action: none;
56+
57+
&.dragging {
58+
cursor: grabbing;
4359
}
60+
}
61+
62+
.chat-action-group {
63+
display: flex;
64+
flex-direction: column;
65+
align-items: center;
66+
gap: 2px;
67+
width: 32px;
68+
}
4469

45-
.show {
46-
transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
70+
.chat-action-button {
71+
.anticon {
72+
font-size: 16px;
4773
}
4874

49-
.show .modal {
50-
position: fixed;
51-
top: 0;
52-
width: 100%;
53-
height: 100%;
54-
z-index: 100;
55-
opacity: 1;
75+
.chat-img {
76+
width: 16px;
77+
height: 16px;
78+
opacity: 0.5;
79+
transition: opacity 0.16s ease;
5680
}
5781

58-
.show .drawer-panel {
59-
transform: translate(0);
82+
&:hover .chat-img,
83+
&:focus-visible .chat-img {
84+
opacity: 1;
6085
}
86+
}
6187

62-
::ng-deep {
63-
.ant-float-btn-group {
64-
position: absolute;
65-
padding: 10px 0;
66-
opacity: 1;
67-
}
88+
.chat-panel {
89+
position: fixed;
90+
right: 12px;
91+
bottom: 12px;
92+
width: min(440px, calc(100vw - 24px));
93+
min-width: 260px;
94+
height: min(400px, calc(100dvh - 24px));
95+
overflow: hidden;
96+
border-radius: 10px;
97+
background: #fff;
98+
box-shadow: 0 0 8px 4px #00000014;
99+
pointer-events: auto;
100+
transition:
101+
width 0.25s cubic-bezier(0.7, 0.3, 0.1, 1),
102+
height 0.25s cubic-bezier(0.7, 0.3, 0.1, 1),
103+
border-radius 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
104+
z-index: 2;
68105

69-
.ant-float-btn-group-circle .ant-float-btn-circle:not(:last-child) {
70-
margin-bottom: 5px;
71-
}
106+
&.chat-panel-expanded {
107+
top: 0;
108+
right: 0;
109+
bottom: auto;
110+
width: min(440px, 100vw);
111+
height: 100dvh;
112+
border-radius: 10px 0 0 10px;
113+
}
72114

73-
.ant-float-btn-default,
74-
.ant-float-btn-default .ant-float-btn-body {
75-
position: relative;
76-
background: rgba(30, 30, 30, 0.85);
77-
border-radius: 999px;
78-
box-shadow: 0 6px 16px rgba(0,0,0,.30);
79-
transition: background .2s ease, box-shadow .2s ease;
115+
.content {
116+
width: 100%;
117+
height: 100%;
118+
119+
iframe {
120+
display: block;
121+
width: 100%;
122+
height: 100%;
80123
border: none;
81124
}
82-
.ant-float-btn-default:hover,
83-
.ant-float-btn-default:hover .ant-float-btn-body {
84-
background: rgba(20, 20, 20, 0.92);
85-
box-shadow: 0 8px 22px rgba(0,0,0,.36);
86-
}
125+
}
126+
}
87127

88-
.ant-float-btn-default .ant-float-btn-body::before,
89-
.ant-float-btn-default::before {
90-
content: "";
91-
position: absolute;
92-
inset: 0;
93-
border-radius: 999px;
94-
pointer-events: none;
95-
box-shadow:
96-
inset 0 0 0 1px rgba(255,255,255,.65),
97-
0 0 0 1px rgba(0,0,0,.75);
98-
}
128+
::ng-deep {
129+
.chat-drag-handle .anticon {
130+
font-size: 16px;
131+
}
132+
}
99133

100-
.ant-btn .anticon,
101-
.ant-float-btn .anticon {
102-
color: #fff;
103-
filter: drop-shadow(0 1px 1px rgba(0,0,0,.75));
104-
}
134+
@media (max-width: 480px) {
135+
.chat-panel {
136+
right: 6px;
137+
bottom: 6px;
138+
width: calc(100vw - 12px);
139+
height: min(400px, calc(100dvh - 12px));
105140

106-
img.chat-img {
107-
width: 18px;
108-
height: 18px;
109-
opacity: .95;
110-
filter: drop-shadow(0 1px 1px rgba(0,0,0,.75));
141+
&.chat-panel-expanded {
142+
right: 0;
143+
width: 100vw;
144+
border-radius: 0;
111145
}
112146
}
113147
}

0 commit comments

Comments
 (0)