网站运营工作是干什么的做数据网站

网站运营工作是干什么的,做数据网站,建筑工程网格化,域名服务器都有了怎么做网站MateChat / Angular 前端智能化场景解决方案UI库#xff0c;轻松构建你的AI应用。已服务于华为内部多个应用智能化改造#xff0c;并助力CodeArts、InsCode AI IDE等智能化助手搭建。 特性 面向智能化场景组件库开箱即用多场景匹配多主题适配快速集成#xff1a; 1. 引入 在…MateChat / Angular前端智能化场景解决方案UI库轻松构建你的AI应用。已服务于华为内部多个应用智能化改造并助力CodeArts、InsCode AI IDE等智能化助手搭建。特性面向智能化场景组件库开箱即用多场景匹配多主题适配快速集成1. 引入在app.ts文件中引入模块import{Component,signal}fromangular/core;import{RouterOutlet}fromangular/router;import{CommonModule}fromangular/common;import{BubbleModule}frommatechat/ng;Component({selector:app-root,standalone:true,imports:[RouterOutlet,CommonModule,BubbleModule],templateUrl:./app.html,styleUrl:./app.css})exportclassApp{protectedreadonly titlesignal(matechat-demo);}2. 使用在app.html文件中使用 MateChat 组件如mc-bubble[content]Hello, MateChat[avatarConfig]{ name: matechat }/mc-bubble3. 以下为一个简单的对话界面搭建示例在app.html使用如下代码divclassmc-layoutdivclasschat-containerdivclasschat-header:titleMateChatimg srchttps://matechat.gitcode.com/logo.svg/spanMateChat/span/divif(newPage){divclasswelcom-pagedivclasscontent-wrapperdivclassmc-introductiondivclassmc-introduction-logo-containerimg srchttps://matechat.gitcode.com/logo2x.svgaltMateChat/divclassmc-introduction-titleMateChat/div/divdivclassmc-introduction-descriptiondivMateChat 可以辅助研发人员编码、查询知识和相关作业信息、编写文档等。/divdiv作为AI模型MateChat 提供的答案可能不总是确定或准确的但您的反馈可以帮助 MateChat 做的更好。/div/div/divdivclassguess-questiondivclassguess-titlediv猜你想问/div/divdivclassguess-contentng-container*ngForlet item of questionListspan(click)onSubmit(item){{item}}/span/ng-container/div/div/div/div}else{divclasschat-listng-container*ngForlet msg of messagesif(msg.fromuser){mc-bubbleclassuser-bubble[align]right[content]msg.content[avatarConfig]avatarConfig/mc-bubble}elseif(msg.frommodel){mc-bubbleclassmodel-bubble[align]left[loading]msg.loading[avatarConfig]modelAvatarmc-markdown-card[theme]theme[content]msg.content[enableMermaid]true/mc-markdown-card/mc-bubble}/ng-container/div}divclasschat-footermc-input(submit)onSubmit($event)/mc-inputdivclassstatement-boxspan内容由AI生成无法确保准确性和完整性仅供参考/span/div/div/div/div在app.ts中使用如下代码import{Component,signal}fromangular/core;import{CommonModule}fromangular/common;import{BubbleModule,InputModule,MarkdownCardModule}frommatechat/ng;Component({selector:app-root,standalone:true,imports:[CommonModule,BubbleModule,InputModule,MarkdownCardModule],templateUrl:./app.html,styleUrl:./app.css,})exportclassApp{protectedreadonly titlesignal(matechat-demo);inputValue;messages:any[];newPagetrue;questionList[帮我写一篇文章,你可以帮我做些什么,帮我写一个快速排序,使用 js 格式化时间,];avatarConfig{imgSrc:https://matechat.gitcode.com/png/demo/userAvatar.svg,};modelAvatar{imgSrc:https://matechat.gitcode.com/logo.svg,};onSubmit(evt:any){this.newPagefalse;this.inputValue;// 用户发送消息this.messages.push({from:user,content:evt,});setTimeout((){// 模型返回消息this.messages.push({from:model,content:evt,});},200);};}在将模板应用中的app.css修改成app.less使用如下代码::ng-deep body{margin:0;color:var(--devui-text,#252b3a);}.mc-layout{height:100vh;width:100%;padding:12px;box-sizing:border-box;background:linear-gradient(to bottom,#d0c9ff0%,#e6d6f08%,#f1dbea12%,#c8dcfb40%,#abc6f660%,#87aefe90%);}::ng-deep body[ui-themegalaxy-theme].mc-layout{background:var(--devui-global-bg,#f6f6f8);.chat-container{background:transparent;border:none;}}.chat-container{display:flex;flex-direction:column;box-sizing:border-box;gap:8px;}.welcom-page{display:flex;flex-direction:column;flex:1;max-width:1200px;margin:0auto;overflow:auto;width:100%;max-width:1200px;padding:012px;box-sizing:border-box;gap:24px;}.guess-title{display:flex;justify-content:space-between;align-items:center;color:var(--devui-text,#252b3a);margin-bottom:16px;}.guess-content{display:flex;align-items:center;flex-wrap:wrap;gap:12px;}.mc-introduction-logo-container{display:flex;align-items:center;gap:8px;}.mc-introduction-description{text-align:center;font-size:14px;color:var(--devui-text,#252b3a);}.mc-introduction-title{font-weight:700;font-size:32px;letter-spacing:1px;color:var(--devui-text,#252b3a);}.guess-question{width:100%;margin-top:24px;padding:24px;border-radius:24px;box-sizing:border-box;background-color:var(--devui-base-bg,#ffffff);}.guess-question-title{font-size:24px;font-weight:700;color:var(--devui-text,#252b3a);margin-bottom:16px;}.guess-question span{font-size:var(--devui-font-size,12px);color:var(--devui-aide-text,#71757f);padding:10px16px;border-radius:var(--devui-border-radius-full,100px);background-color:var(--devui-dividing-line,#f2f2f3);cursor:pointer;}.content-wrapper{margin:auto0;}.chat-container{width:100%;height:100%;padding:12px;border-radius:20px;margin:0auto;border:1px solid #e5e5e5;background:linear-gradient(180deg,#fffffff2,#f8fafff299%);}.chat-header{display:flex;align-items:center;gap:4px;margin-bottom:8px;img{width:32px;height:32px;}span{font-size:20px;color:var(--devui-text,#252b3a);}}.mc-introduction{display:flex;flex-direction:column;align-items:center;gap:12px;}.chat-list{flex:1;width:100%;max-width:1200px;margin:0auto12px;overflow:auto;.user-bubble,.model-bubble{display:block;margin-top:8px;}}.chat-footer{width:100%;max-width:1200px;margin:0auto;padding:012px12px;box-sizing:border-box;}.statement-box{font-size:12px;margin-top:8px;color:var(--devui-aide-text,#71757f);text-align:center;}以下是配置 Angular CLI 使用 Less 的方法Angular CLI 默认使用 CSS 作为样式表预处理器但可以通过以下步骤配置为使用 Less安装 Less 和 Less Loadernpm install less less-loader--save-dev修改 angular.json 配置文件在 projects - your-project-name - architect - build - options 中添加或修改样式配置{projects:{your-project:{architect:{build:{options:{styles:[src/styles.less],stylePreprocessorOptions:{includePaths:[src/styles]}}}}}}}将组件中的 .css 文件重命名为 .less并在组件装饰器中更新样式 URLsComponent({styleUrls:[./app.component.less]})重启开发服务器以使配置生效ng serve注意事项确保所有组件的样式文件扩展名从 .css 改为 .less如果已有全局样式文件也需将其扩展名改为 .less当使用第三方库时确保其样式文件也支持 Less 预处理版本兼容性很重要建议使用与 Angular CLI 兼容的 Less 和 less-loader 版本Application bundle generation failed.[1.522seconds]-2025-12-11T05:46:09.453Z ✘[ERROR]TS2339:Propertythemedoes not exist on typeApp.[plugin angular-compiler]src/app/app.html:42:37:42│...mc-markdown-card[theme]theme[content]msg.content[en...╵~~~~~Error occursinthe templateofcomponent App.src/app/app.ts:8:15:8│ templateUrl:./app.html,╵~~~~~~~~~~~~✘[ERROR]Could not resolvesrc/styles.lessangular:styles/global:styles:1:8:1│ importsrc/styles.less;╵~~~~~~~~~~~~~~~~~主题化在main.ts中初始化主题更多用法可参考 devui-themeimport{bootstrapApplication}fromangular/platform-browser;import{appConfig}from./app/app.config;import{App}from./app/app;import{ThemeServiceInit,infinityTheme,galaxyTheme}fromdevui-theme;ThemeServiceInit({galaxy-theme:galaxyTheme,// 暗黑主题infinity-theme:infinityTheme,},infinity-theme);bootstrapApplication(App,appConfig).catch((err)console.error(err));MateChat是一个基于Angular的前端智能化UI组件库专为AI应用场景设计。它提供开箱即用的组件如对话气泡、输入框等支持多主题适配已成功应用于华为内部多个智能化项目。通过简单的模块引入和组件调用开发者可快速构建AI对话界面。示例代码展示了如何实现包含欢迎页、消息列表和输入区的完整聊天界面支持用户与AI模型的交互。该库显著降低了AI应用的前端开发门槛。MateChathttps://gitcode.com/DevCloudFE/MateChatMateChat官网https://matechat.gitcode.comDevUI官网https://devui.design/home