组件：头像上传AvatarUploader、详情title、面包屑、markdown预览器、大模型会话界面【头部展示、tts语音合成以及转写、】
utils：xxx


# skynet-pandora-ui

### 环境要求

```
项目使用pnpm
node 16+
```

### 设置公司 npm 镜像仓库

```
npm config set registry=https://depend.iflytek.com/artifactory/api/npm/npm-repo
```

### 安装依赖包

```
pnpm install
```

### 启动

```
pnpm run docs:dev
```

### 开发一个新组件【button 按钮为例】

##### 在 packages 目录下新建自己的组件目录文件夹

```
├─button
| ├─ src              # 存放组件源代码文件夹【规范：源码组件vue出口文件的name名称定义以T开头】
| ├─ index.ts         # 必须要，组件注册，可直接复制参考button的index.ts文件
```

##### 在 index.ts【packages->index.ts】 引入注册下

```JavaScript
import TButton from './button'

// 按需引入
export {
  TButton
}
```

##### 在 components.d.ts【packages->components.d.ts】 引入注册下

```JavaScript
// components.d.ts
import TButton from './button/src/index.vue'
declare module 'vue' {
  export interface GlobalComponents {
    TButton: typeof TButton
  }
}
```

##### 在 global.d.ts【根路径->global.d.ts】 引入注册下

```JavaScript
import TButton from './lib/button/src/index.vue'

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    TButton: typeof TButton
  }
}
```

##### 在本地 docs 中使用

```
doc
| ├─ .vitepress
  | ├─ .config.ts   # 3.文档的所有菜单配置，添加自己的侧边栏菜单【注意分模块，基础、复杂还是业务类】
| ├─ examples       # 1.在该文件夹下创建自己的文件demo案例
| ├─ components     # 2.在对应的模块下书写自己组件的markdown说明文档
```

#### 在项目中测试使用

###### 首先使用以下命令构建 lib 包

```sh
pnpm run lib
```

###### 本地使用脚手架创建一个 test 工程

以下 skynet-pandora-ui 依赖包来源于本地上面打的包，使用的相对路径

```JavaScript
// package.json文件
{
  "name": "turing-test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "skynet-pandora-ui": "file:../skynet-pandora-ui",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vue-tsc": "^1.8.5"
  }
}
```
#### openapi版本调试注意事项
本地设置(window as any).LOCAL_BASEURL = 'ip+端口'用来调试ws接口

#### openapi版本打包注意事项
1.由于umd.cjs的包在本地直接使用时会出现无法找到入口的报错，所以打包配置修改为只打包es模块的包
2.引用时import require$$0, { defineComponent, resolveDirective, ... } from "vue";这行代码在本地运行报错，需手动拆分成两行，
import * as require$$0 from "vue";
import { defineComponent, ... }
3.外部install后，将node_modules复制到本地，手动指定npm i agents-components@file:packages/agents-components
如果组件路径指定还是不对则在vite.config.js中添加'agents-components': resolve(__dirname, 'packages/agents-components')别名配置