mirror of
https://gitee.com/eolink_admin/postcat.git
synced 2024-11-29 18:28:09 +08:00
feat: star-motivation standalone component
This commit is contained in:
scarqin
parent
eb79143e6c
commit
c65e0fcb0b
@ -3,7 +3,7 @@
|
||||
flex-direction: column;
|
||||
background-color: var(--background-color);
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
height: 50%;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 10px var(--shadow-color);
|
||||
}
|
||||
|
||||
@ -2,20 +2,19 @@
|
||||
* API Design reference: https://github.dev/akveo/nebular/blob/master/src/playground/with-layout/chat/chat.module.ts
|
||||
* Component Document:https://akveo.github.io/nebular/docs/components/chat-ui/overview/#nbchatcomponent
|
||||
*/
|
||||
import { Component, ContentChildren, Input, QueryList } from '@angular/core';
|
||||
import { Component, ContentChildren, Input, QueryList, TemplateRef } from '@angular/core';
|
||||
|
||||
import { ChatRobotMessageComponent } from '../chat-robot-message/chat-robot-message.component';
|
||||
import { ChatRobotService } from '../chat-robot.service';
|
||||
|
||||
@Component({
|
||||
selector: 'pc-chat-robot',
|
||||
template: `
|
||||
<div class="header flex justify-between">
|
||||
<div class="header flex justify-between items-center">
|
||||
<span>{{ title }}</span>
|
||||
<eo-iconpark-icon
|
||||
class="box-border flex items-center justify-center w-4 h-4 rounded-full end_icon"
|
||||
name="close"
|
||||
size="10"
|
||||
></eo-iconpark-icon>
|
||||
<button eo-ng-button nzType="text">
|
||||
<eo-iconpark-icon size="14" name="close" (click)="closeRobot()"></eo-iconpark-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="messages flex flex-col flex-1">
|
||||
<ng-content select="pc-chat-robot-message"></ng-content>
|
||||
@ -23,7 +22,9 @@ import { ChatRobotMessageComponent } from '../chat-robot-message/chat-robot-mess
|
||||
</div>
|
||||
<div class="form">
|
||||
<ng-content select="pc-chat-robot-form"></ng-content>
|
||||
<p class="mt-[5px] text-[12px] text-tips">Power by <a href="https://www.apispace.com" target="_blank">APISpace</a></p>
|
||||
<p class="mt-[5px] text-[12px] text-tips"
|
||||
>Power by <a [href]="powerBy.link" target="_blank">{{ powerBy.title }}</a></p
|
||||
>
|
||||
</div>
|
||||
`,
|
||||
styleUrls: ['./chat-robot.component.scss']
|
||||
@ -31,4 +32,11 @@ import { ChatRobotMessageComponent } from '../chat-robot-message/chat-robot-mess
|
||||
export class ChatRobotComponent {
|
||||
@Input() title: string;
|
||||
@ContentChildren(ChatRobotMessageComponent) messages: QueryList<ChatRobotMessageComponent>;
|
||||
|
||||
@Input() powerBy: { title: string; link: string };
|
||||
|
||||
constructor(private chat: ChatRobotService) {}
|
||||
closeRobot() {
|
||||
this.chat.close();
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,11 +4,14 @@ import { Injectable } from '@angular/core';
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ChatRobotService {
|
||||
isShow: boolean = false;
|
||||
isShow: boolean = true;
|
||||
constructor() {}
|
||||
open() {
|
||||
this.isShow = true;
|
||||
}
|
||||
close() {
|
||||
this.isShow = false;
|
||||
}
|
||||
toggleShowStatus() {
|
||||
this.isShow = !this.isShow;
|
||||
}
|
||||
|
||||
@ -0,0 +1,44 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
|
||||
import { SharedModule } from '../../shared/shared.module';
|
||||
|
||||
@Component({
|
||||
selector: 'pc-star-motivation',
|
||||
template: ` <div class="flex flex-col items-center"
|
||||
><p i18n class="text-center mt-[15px]">
|
||||
Hi!~ If you like <b>{{ subject }}</b
|
||||
>, please give the Postcat a Star!<br />Your support is our greatest motivation~
|
||||
</p>
|
||||
<a
|
||||
class="favor-image-link mt-[15px]"
|
||||
target="_blank"
|
||||
href="https://github.com/Postcatlab/postcat"
|
||||
trace
|
||||
traceID="jump_to_github"
|
||||
[traceParams]="{ where_jump_to_github: 'heart' }"
|
||||
>
|
||||
<img loading="lazy" class="w-[40px] favor-image align-middle" src="assets/images/heart.png" />
|
||||
</a>
|
||||
</div>`,
|
||||
standalone: true,
|
||||
imports: [SharedModule],
|
||||
styles: [
|
||||
`
|
||||
.favor-image-link {
|
||||
background-color: #eee;
|
||||
border-radius: 50%;
|
||||
padding: 13px;
|
||||
}
|
||||
|
||||
.favor-image {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.favor-image:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
`
|
||||
]
|
||||
})
|
||||
export class StarMotivationComponent {
|
||||
@Input() subject: string = 'Postcat';
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
.favor-image {
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.favor-image-link {
|
||||
background-color: #eee;
|
||||
border-radius: 50%;
|
||||
padding: 13px;
|
||||
}
|
||||
@ -8,7 +8,7 @@ import { WebService } from '../../../core/services';
|
||||
<eo-logo class="logo mt-[30px] w-[150px] h-[150px]"></eo-logo>
|
||||
<p class="font-bold mt-[15px] text-[16px]">Postcat</p>
|
||||
<p class="">V{{ versionInfo?.version }}</p>
|
||||
<!-- star -->
|
||||
<!-- Star -->
|
||||
<a
|
||||
href="https://github.com/Postcatlab/postcat"
|
||||
target="_blank"
|
||||
@ -19,26 +19,15 @@ import { WebService } from '../../../core/services';
|
||||
>
|
||||
<img loading="lazy" class="mx-4" src="https://img.shields.io/github/stars/postcatlab/postcat?style=social" alt="" />
|
||||
</a>
|
||||
<p i18n class="text-center mt-[15px]">
|
||||
Hi!~ If you like <b>Postcat</b>, please give the Postcat a Star!<br />Your support is our greatest motivation~
|
||||
</p>
|
||||
<a
|
||||
class="favor-image-link mt-[15px]"
|
||||
target="_blank"
|
||||
href="https://github.com/Postcatlab/postcat"
|
||||
trace
|
||||
traceID="jump_to_github"
|
||||
[traceParams]="{ where_jump_to_github: 'heart' }"
|
||||
>
|
||||
<img loading="lazy" class="w-[40px] favor-image align-middle" src="assets/images/heart.png" />
|
||||
</a>
|
||||
<!-- Star motivation -->
|
||||
<pc-star-motivation></pc-star-motivation>
|
||||
<nz-divider></nz-divider>
|
||||
<!-- System info -->
|
||||
<div class="w-[300px] text-[12px] text-center m-auto">
|
||||
<p *ngFor="let item of list" class="mt-[10px]">{{ item.label }}: {{ item.value }}</p>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styleUrls: ['./about.component.scss']
|
||||
`
|
||||
})
|
||||
export class AboutComponent implements OnInit {
|
||||
list;
|
||||
|
||||
@ -11,6 +11,7 @@ import { NzTreeViewModule } from 'ng-zorro-antd/tree-view';
|
||||
|
||||
import { EoSettingModule } from '../eo-ui/setting/setting.module';
|
||||
import { LogoModule } from '../logo/logo.module';
|
||||
import { StarMotivationComponent } from '../star-motivation/star-motivation.component';
|
||||
import { AboutComponent, DataStorageComponent, LanguageSwticherComponent, TokenComponent } from './common';
|
||||
import { AccountComponent } from './common/account.component';
|
||||
import { SelectThemeComponent } from './common/select-theme/select-theme.component';
|
||||
@ -27,7 +28,17 @@ const ANTDMODULES = [NzDividerModule, NzInputNumberModule, NzEmptyModule, NzDesc
|
||||
LanguageSwticherComponent,
|
||||
AboutComponent
|
||||
],
|
||||
imports: [EoSettingModule, LogoModule, FormsModule, EoNgTabsModule, ReactiveFormsModule, SharedModule, CommonModule, ...ANTDMODULES],
|
||||
imports: [
|
||||
EoSettingModule,
|
||||
StarMotivationComponent,
|
||||
LogoModule,
|
||||
FormsModule,
|
||||
EoNgTabsModule,
|
||||
ReactiveFormsModule,
|
||||
SharedModule,
|
||||
CommonModule,
|
||||
...ANTDMODULES
|
||||
],
|
||||
exports: [SystemSettingComponent]
|
||||
})
|
||||
export class SystemSettingModule {}
|
||||
|
||||
@ -4,17 +4,3 @@
|
||||
bottom: 25px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.favor-image-link {
|
||||
background-color: #eee;
|
||||
border-radius: 50%;
|
||||
padding: 13px;
|
||||
}
|
||||
|
||||
.favor-image {
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
import { ChatRobotModule } from '../../../modules/chat-robot/chat-robot.module';
|
||||
import { ChatRobotService } from '../../../modules/chat-robot/chat-robot.service';
|
||||
import { StarMotivationComponent } from '../../../modules/star-motivation/star-motivation.component';
|
||||
import { TraceService } from '../../../shared/services/trace.service';
|
||||
|
||||
type messageItem = {
|
||||
text: string;
|
||||
@ -16,8 +20,10 @@ type messageItem = {
|
||||
|
||||
@Component({
|
||||
selector: 'pc-chatgpt-robot',
|
||||
standalone: true,
|
||||
imports: [StarMotivationComponent, CommonModule, ChatRobotModule],
|
||||
template: `
|
||||
<pc-chat-robot *ngIf="chat.isShow" [title]="title">
|
||||
<pc-chat-robot *ngIf="chat.isShow" [powerBy]="powerBy" [title]="title">
|
||||
<pc-chat-robot-message
|
||||
[reply]="initMessage.reply"
|
||||
[sender]="initMessage.user.name"
|
||||
@ -26,21 +32,7 @@ type messageItem = {
|
||||
[messageContent]="messageTemplate"
|
||||
>
|
||||
<ng-template #messageTemplate>
|
||||
<div class="flex flex-col items-center">
|
||||
<p i18n class="text-center mt-[15px]">
|
||||
Hi!~ If you like <b>ChatGPT Extensions</b>, please give the Postcat a Star!<br />Your support is our greatest motivation~
|
||||
</p>
|
||||
<a
|
||||
class="favor-image-link mt-[15px]"
|
||||
target="_blank"
|
||||
href="https://github.com/Postcatlab/postcat"
|
||||
trace
|
||||
traceID="jump_to_github"
|
||||
[traceParams]="{ where_jump_to_github: 'heart' }"
|
||||
>
|
||||
<img loading="lazy" class="w-[40px] favor-image align-middle" src="assets/images/heart.png" />
|
||||
</a>
|
||||
</div>
|
||||
<pc-star-motivation subject="ChatGPT Extensions" i18n-subject></pc-star-motivation>
|
||||
</ng-template>
|
||||
</pc-chat-robot-message>
|
||||
<pc-chat-robot-message
|
||||
@ -67,6 +59,10 @@ export class ChatgptRobotComponent implements OnInit {
|
||||
avatar: './assets/images/logo.svg'
|
||||
}
|
||||
};
|
||||
powerBy = {
|
||||
title: 'APISPace',
|
||||
link: 'https://www.apispace.com?utm_source=postcat&utm_medium=robot&utm_term=chatgptturbo'
|
||||
};
|
||||
messages: messageItem[] = [];
|
||||
constructor(private http: HttpClient, public chat: ChatRobotService) {}
|
||||
ngOnInit() {
|
||||
|
||||
@ -6,7 +6,6 @@ import { LocalWorkspaceTipComponent } from '../layouts/local-workspace-tip/local
|
||||
import { NavbarModule } from '../layouts/navbar/navbar.module';
|
||||
import { SidebarComponent } from '../layouts/sidebar/sidebar.component';
|
||||
import { ToolbarModule } from '../layouts/toolbar/toolbar.module';
|
||||
import { ChatRobotModule } from '../modules/chat-robot/chat-robot.module';
|
||||
import { NpsMaskModule } from '../modules/nps-mask/nps-mask.module';
|
||||
import { SystemSettingModule } from '../modules/system-setting/system-setting.module';
|
||||
import { SharedModule } from '../shared/shared.module';
|
||||
@ -17,7 +16,12 @@ import { PagesRoutingModule } from './pages-routing.module';
|
||||
import { PagesComponent } from './pages.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [PagesComponent, SidebarComponent, LocalWorkspaceTipComponent, UserModalComponent, ThirdLoginComponent],
|
||||
exports: [],
|
||||
providers: [],
|
||||
schemas: [],
|
||||
imports: [
|
||||
ChatgptRobotComponent,
|
||||
PagesRoutingModule,
|
||||
NpsMaskModule,
|
||||
NzNotificationModule,
|
||||
@ -25,19 +29,7 @@ import { PagesComponent } from './pages.component';
|
||||
CommonModule,
|
||||
NavbarModule,
|
||||
ToolbarModule,
|
||||
SharedModule,
|
||||
ChatRobotModule
|
||||
],
|
||||
declarations: [
|
||||
PagesComponent,
|
||||
SidebarComponent,
|
||||
LocalWorkspaceTipComponent,
|
||||
UserModalComponent,
|
||||
ThirdLoginComponent,
|
||||
ChatgptRobotComponent
|
||||
],
|
||||
exports: [],
|
||||
providers: [],
|
||||
schemas: []
|
||||
SharedModule
|
||||
]
|
||||
})
|
||||
export class PagesModule {}
|
||||
|
||||
@ -13,7 +13,6 @@ import { EoNgSelectModule } from 'eo-ng-select';
|
||||
import { EoNgSwitchModule } from 'eo-ng-switch';
|
||||
import { ExtensionFeedbackComponent } from 'eo/workbench/browser/src/app/shared/components/extension-feedback/extension-feedback';
|
||||
import { EoSchemaFormComponent } from 'eo/workbench/browser/src/app/shared/components/schema-form/schema-form.component';
|
||||
import { TraceDirective } from 'eo/workbench/browser/src/app/shared/directives/trace.directive';
|
||||
import { NzDividerModule } from 'ng-zorro-antd/divider';
|
||||
import { NzEmptyModule } from 'ng-zorro-antd/empty';
|
||||
import { NzFormModule } from 'ng-zorro-antd/form';
|
||||
@ -29,6 +28,7 @@ import { EoIconparkIconModule } from '../modules/eo-ui/iconpark-icon/eo-iconpark
|
||||
import { DownloadClientModalComponent } from './components/download-client.component';
|
||||
import { ExtensionAppComponent } from './components/extension-app/extension-app.component';
|
||||
import { ClickStopPropagationDirective, FormFocusDirective } from './directives';
|
||||
import { TraceDirective } from './directives/trace.directive';
|
||||
|
||||
const COMPONENTS = [DownloadClientModalComponent, ExtensionAppComponent, EoSchemaFormComponent, ExtensionFeedbackComponent];
|
||||
const DIRECTIVES = [ClickStopPropagationDirective, FormFocusDirective, TraceDirective];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user