Skip to main content
注意：二开最好不要都动其他目录的文件，只修改langchat-llm-ops 这个文件夹的代码即可

​
前端工程结构

前端工程如下 image-20250910215946981

​
去除页面水印

进入前端项目，找到langchat-ui/apps/langchat/src/preferences.ts文件，将watermark设置为false即可。 修改之后需要清除浏览器缓存并重新登陆

​
去除页面左下角的小组件

进入前端项目，找到langchat-ui/apps/langchat/index.html文件，删除掉关于chatWidget的JS和CSS引用，以及相关JS脚本即可

​
前端组件的开关配置

前端使用了Vben5，存在很多可开关的配置，因此并不需要屏蔽或者注销某个组件的代码，可以通过开关轻松的屏蔽组件是否显示。 具体配置文件位于 src/preferences.ts image-20250910220025205 全部的配置如下： 
interface AppPreferences {
  /** 权限模式 */
  accessMode: AccessModeType;
  /** 登录注册页面布局 */
  authPageLayout: AuthPageLayoutType;
  /** 检查更新轮询时间 */
  checkUpdatesInterval: number;
  /** 是否开启灰色模式 */
  colorGrayMode: boolean;
  /** 是否开启色弱模式 */
  colorWeakMode: boolean;
  /** 是否开启紧凑模式 */
  compact: boolean;
  /** 是否开启内容紧凑模式 */
  contentCompact: ContentCompactType;
  // /** 应用默认头像 */
  defaultAvatar: string;
  // /** 开启动态标题 */
  dynamicTitle: boolean;
  /** 是否开启检查更新 */
  enableCheckUpdates: boolean;
  /** 是否显示偏好设置 */
  enablePreferences: boolean;
  /**
   * @zh_CN 是否开启refreshToken
   */
  enableRefreshToken: boolean;
  /** 是否移动端 */
  isMobile: boolean;
  /** 布局方式 */
  layout: LayoutType;
  /** 支持的语言 */
  locale: SupportedLanguagesType;
  /** 登录过期模式 */
  loginExpiredMode: LoginExpiredModeType;
  /** 应用名 */
  name: string;
  /** 偏好设置按钮位置 */
  preferencesButtonPosition: PreferencesButtonPositionType;
  /**
   * @zh_CN 是否开启水印
   */
  watermark: boolean;
}

​
修改前端LOGO和Title

第一步是修改preferences.ts文件 修改配置 修改app.name的名称就是应用的Title名称。 关于静态HTML文件的配置 image-20250910220107945

​
修改环境变量

在前端分为了开发环境变量和生产环境变量。
  1. 开发环境：vue内置的了proxy插件，会将前端请求反代到后端的请求
  2. 生产环境：依赖于nginx的反代理配置
image-20250910220233946 本地开发环境，后端使用了8100端口，前端服务使用了5888端口
如果你修改了端口，记得同步修改这里的端口

​
修改生产环境

注意：一定要配置打包后生产环境后端服务的IP地址和端口 image-20250910220257123

​
代理配置

上面提到的开发环境的反向代理配置是借助vite的配置，位于vite.config.mts文件 image-20250910220317889