移动端调整

src/assets/icons/alIcon/iconfont.css

@@ -0,0 +1,23 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4667545 */
+  src: url('iconfont.woff2?t=1724844167396') format('woff2'),
+       url('iconfont.woff?t=1724844167396') format('woff'),
+       url('iconfont.ttf?t=1724844167396') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-lishi:before {
+  content: "\e63b";
+}
+
+.icon-xinduihua:before {
+  content: "\e635";
+}
+

src/assets/icons/alIcon/iconfont.json

@@ -0,0 +1,23 @@
+{
+  "id": "4667545",
+  "name": "元宇宙",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "1305401",
+      "name": "历史",
+      "font_class": "lishi",
+      "unicode": "e63b",
+      "unicode_decimal": 58939
+    },
+    {
+      "icon_id": "39608113",
+      "name": "新对话",
+      "font_class": "xinduihua",
+      "unicode": "e635",
+      "unicode_decimal": 58933
+    }
+  ]
+}

src/main.js

@@ -8,6 +8,10 @@ import "./assets/styles/element-variables.scss";
 import "@/assets/styles/tailwindcss.css"
 import "@/assets/styles/index.scss"; // global css
 import "@/assets/styles/rcBase.scss"; // rcBase css
+
+// 阿里云矢量图标
+import "@/assets/icons/alIcon/iconfont.css"
+
 import App from "./App";
 import store from "./store";
 import router from "./router";

src/router/index.js

@@ -41,7 +41,7 @@ export const constantRoutes = [
         component: () => import("@/views/home/index"),
         name: "Home",
       },
-      
+
       // 对话界面
       {
         path: "/chat",
@@ -107,12 +107,12 @@ export const constantRoutes = [
     component: () => import("@/views/chat/ChatH5"),
     name: "ChatH5",
   },
-  {
-    path: "/createH5",
-    component: () => import("@/views/create/indexH5"),
-    name: "CreateH5",
-  },
-  
+  // {
+  //   path: "/createH5",
+  //   component: () => import("@/views/create/indexH5"),
+  //   name: "CreateH5",
+  // },
+
   // 注册移动端
   {
     path: "/registerH5",

src/views/chat/ChatH5.vue

@@ -80,7 +80,7 @@
       </div>
       <el-dialog :visible.sync="showBottomPopup" :show-close="false" width="100%" class="phoneBottomPopup">
         <transition name="el-zoom-in-bottom">
-          <div class="content" v-show="showBottomPopup">
+          <div class="popupContent popup1" v-show="showBottomPopup">
             <div class="configForm wf-full h-full flex flex-col">
               <div class="row">
                 <p class="text-base mt-3">选择模型</p>
@@ -93,20 +93,50 @@
                 </div>
               </div>
             </div>
-            <div class="bottom px-4">
+            <div class="bottom px-2">
+              <div class="button text-white" @click="() => {
+                this.showBottomPopup = false
+                this.newStart()
+              }">
+                <i class="icon iconfont icon-xinduihua"></i>
+                <div class="text-xs">新的对话</div>
+              </div>
+              <div class="button text-white" @click="() => {
+                this.showBottomPopup = false
+                this.showHistory()
+              }">
+                <i class="icon iconfont icon-lishi"></i>
+                <div class="text-xs">历史对话</div>
+              </div>
+            </div>
+          </div>
+        </transition>
+      </el-dialog>
+      <el-dialog :visible.sync="showBottomPopup2" :show-close="false" width="100%" class="phoneBottomPopup">
+        <transition name="el-zoom-in-bottom">
+          <div class="popupContent popup2" v-show="showBottomPopup2">
+            <div class=" w-full text-center py-2 text-base font-semibold">历史对话</div>
+            <div class="historyRow py-2 cursor-pointer" v-for="(item, index) in historyList" :key="index" @click="() => {
+              showBottomPopup2 = false
+              clickDialogue(jsHistory, item, index)
+            }">
               <div class="flex justify-between">
-
+                <div class="name text-base">{{ item.chatTitle }}</div>
+                <div class="time">{{ item.createTime }}</div>
               </div>
+              <!-- <div class="info">
+                {{ item. }}
+              </div> -->
             </div>
           </div>
         </transition>
       </el-dialog>
-
     </div>
   </div>
 </template>
 
 <script>
+import Cookies from 'js-cookie'
 import {
   streamChatWithWebApi,
   getGuidanceApi,
@@ -131,7 +161,10 @@ export default {
   },
   data() {
     return {
-      showBottomPopup: true,
+      showBottomPopup: false,
+      showBottomPopup2: false,
+      jsHistory: null,
+      historyList: [],
       // 聊天等待
       chatLoading: false,
       // 是否全屏
@@ -239,6 +272,11 @@ export default {
       // 查找当前角色是否有对话记录
       this.searchHistory(this.info.id)
     },
+    // 显示历史聊天记录
+    showHistory() {
+      this.showBottomPopup2 = true
+    },
+
     formModelChange() {
       // 在浏览器缓存用户的配置
       Cookies.set(`userConfig_${this.$store.state.user.userId}_${this.info.id}`, JSON.stringify(this.configForm))
@@ -530,6 +568,9 @@ export default {
         const element = this.allRecords[i];
         // 如果有则选中角色的最新一条记录并获取对话聊天记录
         if (element.id == characterId) {
+          // 当前角色的聊天记录列表
+          this.historyList = element.chatCharacterList
+          this.jsHistory = element
           console.log(element, '查看对话记录是否有选中的角色');
           flg = true
           element.open = true
@@ -620,8 +661,11 @@ export default {
       // 模型选中角色默认模型
       this.configForm.radio2 = this.info.modelId
       // 如果用户有设置过模型使用用户设置模型
-      let userConfig = JSON.parse(Cookies.get(`userConfig_${this.$store.state.user.userId}_${this.info.id}`))
-      if (userConfig.radio2) {
+      let userConfig = Cookies.get(`userConfig_${this.$store.state.user.userId}_${this.info.id}`)
+      if (userConfig) {
+        userConfig = JSON.parse(userConfig)
+      }
+      if (userConfig && userConfig.radio2) {
         this.configForm.radio2 = userConfig.radio2
       }
       // let HistoryMessage = JSON.parse(localStorage.getItem(`[userId:${123},aiId:${this.info.id}]`));
@@ -1344,6 +1388,52 @@ export default {
   width: 60px;
   height: 32px;
 }
+
+.popup1 {
+  .configForm {
+    margin-bottom: 75px;
+  }
+
+  .bottom {
+    position: absolute;
+    bottom: 0;
+    height: 75px;
+    padding-bottom: 15px;
+    background: var(--bg-color5);
+    width: calc(100% - 30px);
+    overflow-x: auto;
+
+    .button {
+      height: 100%;
+      width: 60px;
+      display: inline-flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      .icon {
+        width: 34px;
+        height: 34px;
+        background: #6a6a6a;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+        font-size: 18px;
+        margin-bottom: 10px;
+      }
+    }
+
+    .button:not(:first-child) {
+      margin-left: 20px;
+    }
+
+  }
+}
+
+.popup2 {
+  height: 100%;
+}
 </style>
 <style scoped>
 .loadingMessage>>>.el-loading-parent--relative {
@@ -1372,7 +1462,7 @@ export default {
   margin-top: 0 !important;
   position: absolute;
   bottom: 0;
-  /* height: 70%; */
+  min-height: 60%;
   background: rgba(255, 255, 255, 0);
 }
 
@@ -1385,24 +1475,20 @@ export default {
   padding: 0;
   width: 100%;
   height: 100%;
+  position: absolute;
+  bottom: 0;
 }
 
-.phoneBottomPopup .content {
+.phoneBottomPopup .popupContent {
   background: var(--bg-color5);
   color: #fff;
   width: 100%;
   height: 100%;
   padding: 10px 15px;
+  position: relative;
 }
 
-.phoneBottomPopup .configForm {
-  margin-bottom: 60px;
-}
-
-.phoneBottomPopup .bottom {
-  height: 60px;
 
-}
 
 .radio>>>.el-radio-button {
   margin-bottom: 5px;

src/views/components/titleH5.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="h5Title">
+    <i class="el-icon-arrow-left icon"></i>
+    <div class="name">{{ titleName }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    titleName: {
+      type: String,
+      default: '标题'
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.h5Title {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .icon {
+    position: absolute;
+    left: 10px;
+    font-size: 26px;
+    cursor: pointer;
+  }
+
+  .name {
+    font-size: 16px;
+    font-weight: 600;
+  }
+}
+</style>

src/views/create/indexH5.vue → src/views/create/createH5.vue

@@ -1,13 +1,14 @@
 <template>
-  <div class="create bg-gray-900 comBg" style="min-height: 100vh;">
-    <div class="text-white mx-auto">
-      <div class="container mx-auto p-4">
+  <div class="create bg-white" style="min-height: 100vh;">
+    <TitleH5 titleName="创建角色" />
+    <div class=" mx-auto">
+      <div class="container containerH5 mx-auto p-4">
         <div class="flex flex-col gap-6">
-          
-          <el-form :model="form" :rules="rules" ref="form" label-width="60px" class="form" >
-            <div class="bg-gray-700 p-3 rounded-lg">
+
+          <el-form :model="form" :rules="rules" ref="form" label-width="60px" class="form">
+            <div class="bg-gray-100 p-3 rounded-lg">
               <div class="text-lg font-medium">基本信息</div>
-              <div class="text-xs text-gray-400 mb-2">
+              <div class="text-xs text-black mb-2">
                 这些信息在机器人描述中供其他用户查看
               </div>
               <div class="flex flex-col gap-4">
@@ -15,7 +16,7 @@
                   <el-form-item label="" prop="picture" label-width="0">
                     <ImageUpload v-model="form.picture" class="imgUp" :limit="1" />
                   </el-form-item>
-                  
+
                   <!-- <div class="bg-gray-600 p-4 rounded-lg flex items-center justify-center">
 
                   </div> -->
@@ -29,12 +30,8 @@
                       <el-input v-model="form.characterName" placeholder="填写名称"></el-input>
                     </el-form-item>
                     <el-form-item label="简介" prop="prologue">
-                      <el-input 
-                        v-model="form.prologue" 
-                        type="textarea"
-                        :autosize="{ minRows: 3, maxRows: 3}"
-                        placeholder="介绍一下你要值造的这个机器人。应段介绍只会是示在机器人的角色详情信息中，不会出现在提示词中，也不会影响到你的机器人。"
-                      ></el-input>
+                      <el-input v-model="form.prologue" type="textarea" :autosize="{ minRows: 3, maxRows: 3 }"
+                        placeholder="介绍一下你要值造的这个机器人。应段介绍只会是示在机器人的角色详情信息中，不会出现在提示词中，也不会影响到你的机器人。"></el-input>
                     </el-form-item>
                     <el-form-item label="性别" prop="sex">
                       <el-radio-group v-model="form.sex">
@@ -50,30 +47,23 @@
                     </el-form-item>
                     <el-form-item label="标签" prop="labelId">
                       <el-select v-model="form.labelId" multiple filterable placeholder="搜索并选择与你的机器人相关的标签">
-                        <el-option :label="item.labelName" :value="item.id" v-for="(item, index) in labelData" :key="index"></el-option>
+                        <el-option :label="item.labelName" :value="item.id" v-for="(item, index) in labelData"
+                          :key="index"></el-option>
                       </el-select>
                     </el-form-item>
                   </div>
                 </div>
               </div>
             </div>
-            <div class="bg-gray-700 p-3 rounded-lg mt-2">
+            <div class="bg-gray-100 p-3 rounded-lg mt-2">
               <div class="text-gl font-medium mb-2">机器人制作</div>
               <el-form-item label="开场白" prop="firstContent" label-width="80px" style="margin-bottom: 20px;">
-                <el-input 
-                  v-model="form.firstContent" 
-                  type="textarea"
-                  :autosize="{ minRows: 4, maxRows: 4}"
-                  placeholder="帮您的机器人设计一段开场白吧"
-                ></el-input>
+                <el-input v-model="form.firstContent" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }"
+                  placeholder="帮您的机器人设计一段开场白吧"></el-input>
               </el-form-item>
               <el-form-item label="角色描述" prop="characterIntroduction" label-width="80px">
-                <el-input 
-                  v-model="form.characterIntroduction" 
-                  type="textarea"
-                  :autosize="{ minRows: 4, maxRows: 4}"
-                  placeholder="通过设置机器人的指令和反馈，机器人在玩家互动时即时回复，增强玩家的互动，有什么较好的指令。我们会对指令的使用情况进行了解，确保指令的正常使用。"
-                ></el-input>
+                <el-input v-model="form.characterIntroduction" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }"
+                  placeholder="通过设置机器人的指令和反馈，机器人在玩家互动时即时回复，增强玩家的互动，有什么较好的指令。我们会对指令的使用情况进行了解，确保指令的正常使用。"></el-input>
               </el-form-item>
               <!-- <div class="flex flex-col gap-4">
                 <div class="text-sm">描述</div>
@@ -96,10 +86,12 @@
 </template>
 
 <script>
+import TitleH5 from "@/views/components/titleH5.vue"
 import { addCharacterApi } from "@/api/create.js"
 import { labelListApi } from "@/api/home.js"
 export default {
   components: {
+    TitleH5
   },
   data() {
     return {
@@ -188,37 +180,42 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
-
+.containerH5 {
+  height: calc(100vh - 40px - 60px);
+  overflow-y: auto;
+}
 </style>
 <style scoped>
-.form >>> .el-form-item {
+.form>>>.el-form-item {
   margin-bottom: 10px;
 }
-.form >>> .el-form-item__label,
-.form >>> .el-radio {
-  color: #fff;
+
+.form>>>.el-form-item__label,
+.form>>>.el-radio {
+  /* color: #fff; */
 }
-.form >>> .el-select {
+
+.form>>>.el-select {
   width: 100%;
 }
-.form >>> .el-input__inner,
-.form >>> .el-textarea__inner,
-.form >>> .el-select__input
- {
+
+.form>>>.el-input__inner,
+.form>>>.el-textarea__inner,
+.form>>>.el-select__input {
   width: 100%;
-  background-color: rgba(75, 85, 99, 1);
-  color: #fff;
+  /* background-color: rgba(75, 85, 99, 1); */
+  /* color: #fff; */
   border-radius: 0.5rem;
-  border-color: rgba(75, 85, 99, 0);
-}
-.imgUp {
-  
+  /* border-color: rgba(75, 85, 99, 0); */
 }
-.imgUp >>> .el-upload__tip {
+
+.imgUp {}
+
+.imgUp>>>.el-upload__tip {
   color: #b8b8b8;
   text-align: center;
 }
+
 /* .imgUp >>> .upload {
   width: 100%;
   display: flex;

src/views/create/createPC.vue

@@ -0,0 +1,345 @@
+<template>
+  <div class="create app-pageContainer" style="min-height: 100vh;">
+    <!-- <Header /> -->
+
+    <div class="mx-auto" style="width: 60%;">
+      <div class="container mx-auto p-4">
+        <div class="flex flex-col gap-6">
+          <div class="text-2xl mt-6 font-semibold">{{ $route.query.id ? '编辑角色' : '创建角色' }}</div>
+          <div class="text-xl font-medium">基本信息</div>
+          <div class="text-xs text-gray-400">
+            这些信息在机器人描述中供其他用户查看
+          </div>
+          <el-form :model="form" :rules="rules" ref="form" label-width="60px" class="form">
+            <div class="flex gap-4">
+              <div class="w-1/3 flex justify-center">
+                <el-form-item label="" prop="picture" label-width="0">
+                  <ImageUpload v-model="form.picture" class="imgUp" :limit="1" />
+                </el-form-item>
+
+                <!-- <div class="bg-gray-600 p-4 rounded-lg flex items-center justify-center">
+
+                </div> -->
+                <!-- <div class="text-sm mt-2 text-center">
+                  支持PNG、JPG、JPEG、WebP及GIF格式的图片大小不超过10MB。
+                </div> -->
+              </div>
+              <div class="flex-1">
+                <div class="flex flex-col gap-4 ml-6 pb-4">
+                  <el-form-item label="名称" prop="characterName">
+                    <el-input v-model="form.characterName" placeholder="填写名称"></el-input>
+                  </el-form-item>
+                  <el-form-item label="简介" prop="prologue">
+                    <el-input v-model="form.prologue" type="textarea" :autosize="{ minRows: 3, maxRows: 3 }"
+                      placeholder="介绍一下你要值造的这个机器人。应段介绍只会是示在机器人的角色详情信息中，不会出现在提示词中，也不会影响到你的机器人。"></el-input>
+                  </el-form-item>
+                  <el-form-item label="性别" prop="sex">
+                    <el-radio-group v-model="form.sex">
+                      <el-radio label="0">男</el-radio>
+                      <el-radio label="1">女</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                  <el-form-item label="类型" prop="type">
+                    <el-radio-group v-model="form.type">
+                      <el-radio :label="0">公开</el-radio>
+                      <el-radio :label="1">私密</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                  <el-form-item label="标签" prop="labelId">
+                    <el-select v-model="form.labelId" multiple filterable placeholder="搜索并选择与你的机器人相关的标签">
+                      <el-option :label="item.labelName" :value="item.id" v-for="(item, index) in labelData"
+                        :key="index"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </div>
+              </div>
+            </div>
+
+            <div class="text-xl font-medium my-6">机器人制作</div>
+            <div class="p-5 rounded-lg">
+              <el-form-item label="性格" label-width="80px" prop="characterPersonalityTags" style="margin-bottom: 20px;">
+                <el-select :multiple-limit="3" v-model="form.characterPersonalityTags" multiple filterable
+                  placeholder="搜索并选择与你的机器人性格（最多三个）">
+                  <el-option :label="item.personalityName" :value="item.id" v-for="(item, index) in personalityList"
+                    :key="index"></el-option>
+                </el-select>
+              </el-form-item>
+
+              <el-form-item label="模型" prop="modelId" label-width="80px" style="margin-bottom: 20px;">
+                <el-radio-group class="radio" v-model="form.modelId">
+                  <el-radio-button v-for="(item, index) in modelList" :key="index" :label="item.id">
+                    {{ item.model }}
+                  </el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+
+              <el-form-item label="开场白" prop="firstContent" label-width="80px" style="margin-bottom: 20px;">
+                <el-input v-model="form.firstContent" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }"
+                  placeholder="帮您的机器人设计一段开场白吧"></el-input>
+              </el-form-item>
+              <el-form-item label="角色描述" prop="characterIntroduction" label-width="80px" style="margin-bottom: 20px;">
+                <el-input v-model="form.characterIntroduction" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }"
+                  placeholder="请在此处提供该角色的背景资讯。 使用'{char}'來指代您的角色。 例如：{char}是一个从小娇生惯养的大小姐。"></el-input>
+              </el-form-item>
+              <el-collapse class="collapse">
+                <el-collapse-item title="更多设置" name="1">
+                  <el-form-item label="场景" prop="scene" label-width="80px" style="margin-bottom: 20px;">
+                    <el-input v-model="form.scene" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }"
+                      placeholder="输入您的角色所处的场景，例如：{char}和{user}现在已经交往一个月了。"></el-input>
+                  </el-form-item>
+
+                  <el-form-item label="对话范例" prop="dialogue" label-width="80px">
+                    <el-input v-model="form.dialogue" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }"
+                      :placeholder="'例如\n<START>\n{user}:嗨，我听说你喜欢在酒吧消磨时间。\n{char}:*兴奋*天呐，是的！'"></el-input>
+                  </el-form-item>
+                </el-collapse-item>
+              </el-collapse>
+            </div>
+          </el-form>
+
+          <div class="flex justify-center">
+            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg" @click.prevent="submitForm">
+              提交
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addCharacterApi, personalityListApi, updateCharacterApi } from "@/api/create.js"
+import { labelListApi } from "@/api/home.js"
+import { detailApi } from "@/api/detail.js"
+
+import {
+  getModelListApi,
+} from "@/api/chat.js"
+export default {
+  components: {
+  },
+  data() {
+    return {
+      modelList: [],
+      labelData: [],
+      personalityList: [],
+      form: {
+        modelId: null,
+        characterName: "",// 人物名称
+        characterIntroduction: "", //人物角色描述
+        characterPersonalityTags: [], //人物性格标签
+        firstContent: "", //首次聊天内容
+        labelId: [], //标签id
+        picture: "", //人物图片
+        prologue: "", //人物简介
+        sex: "", //性别（0男 1女）
+        type: "", //公开或私密（0公开 1私密）
+      },
+      rules: {
+        characterName: [
+          { required: true, message: "请输入名称", trigger: "change" },
+        ],
+        characterIntroduction: [
+          { required: true, message: "请输入人物描述", trigger: "change" },
+        ],
+        firstContent: [
+          { required: true, message: "请输入开场白", trigger: "change" },
+        ],
+        labelId: [
+          { required: true, message: "请选择标签", trigger: "change" },
+        ],
+        picture: [
+          { required: true, message: "请上传人物图片", trigger: "change" },
+        ],
+        prologue: [
+          { required: true, message: "请输入人物简介", trigger: "change" },
+        ],
+        sex: [
+          { required: true, message: "请选择性别", trigger: "change" },
+        ],
+        type: [
+          { required: true, message: "请选择类型", trigger: "change" },
+        ],
+        modelId: [
+          { required: true, message: "请选择模型", trigger: "change" },
+        ],
+      }
+    }
+  },
+  mounted() {
+
+    this.getModelList()
+    this.getLabelList()
+    this.getPersonalityList()
+    console.log(this.$route.query.id, 'this.$route.query.id');
+    if (this.$route.query.id) {
+      detailApi(this.$route.query.id).then(res => {
+        console.log(res, '详情');
+        this.form = res.data
+      })
+    }
+    // console.log(this.$route.params.searchValue, 'this.$route.params.searchValue');
+  },
+  methods: {
+
+    getPersonalityList() {
+      let params = {
+        pageSize: 9999,
+        pageNum: 1
+      }
+      personalityListApi(params).then(res => {
+        console.log(res, '人物性格标签');
+        this.personalityList = res.rows
+      })
+    },
+    getModelList() {
+      getModelListApi().then(res => {
+        console.log(res, '模型列表');
+        this.modelList = res.data
+        this.form.modelId = this.modelList[0].id
+      })
+    },
+    async addCharacter() {
+      let data = {
+        name: this.form.name,
+        description: this.form.description,
+        character: this.form.character,
+        tags: this.form.tags,
+        image: this.form.image,
+        type: this.form.type,
+      }
+      let res = await addCharacterApi(data)
+      console.log(res, 'res');
+    },
+    getLabelList() {
+      let params = {
+        pageSize: 9999,
+        pageNum: 1
+      }
+      labelListApi(params).then(res => {
+        console.log(res, '标签列表');
+        this.labelData = res.rows
+      })
+    },
+    submitForm() {
+      this.$refs.form.validate((valid, object) => {
+        if (valid) {
+          if (this.form.id) {
+            updateCharacterApi(this.form).then(() => {
+              this.$message({
+                message: '编辑成功',
+                type: 'success'
+              });
+              this.$refs.form.resetFields()
+              this.$router.push('/profile')
+            })
+          } else {
+            addCharacterApi(this.form).then(() => {
+              this.$message({
+                message: '创建成功',
+                type: 'success'
+              });
+              this.$refs.form.resetFields()
+              this.$router.push('/profile')
+            })
+          }
+
+        } else {
+          console.log(object, 'object.keys() ');
+          let keys = Object.keys(object)
+          this.$modal.msgError(object[keys[0]][0].message);
+        }
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
+<style scoped>
+.form>>>.el-form-item {
+  margin-bottom: 0px;
+}
+
+.form>>>.el-form-item__label,
+.form>>>.el-radio {
+  /* color: #fff; */
+}
+
+.form>>>.el-select {
+  width: 100%;
+}
+
+.form>>>.el-input__inner,
+.form>>>.el-textarea__inner,
+.form>>>.el-select__input {
+  width: 100%;
+  /* background-color: rgba(75, 85, 99, 1); */
+  /* color: #fff; */
+  border-radius: 0.5rem;
+  /* border-color: rgba(75, 85, 99, 0); */
+}
+
+.imgUp {}
+
+.imgUp>>>.el-upload__tip {
+  /* color: #b8b8b8; */
+  text-align: center;
+}
+
+.imgUp>>>.upload {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  /* padding: 20px;
+  background: rgba(75, 85, 99, 1);
+  border-radius: 10px; */
+}
+
+.imgUp>>>.el-upload {
+  /* border-radius: 50%; */
+}
+
+.imgUp>>>.el-upload-list__item {
+  /* border-radius: 50%; */
+}
+
+.radio>>>.el-radio-button {
+  margin-bottom: 5px;
+  margin-right: 10px;
+  /* border-left: solid 1px #DCDFE6; */
+}
+
+.radio>>>.el-radio-button__inner {
+  border-left: solid 1px #DCDFE6;
+  border-radius: 4px;
+}
+
+.radio>>>.el-radio-button__orig-radio:checked+.el-radio-button__inner {
+  border-left: solid 1px var(--bg-color1);
+  background-color: var(--bg-color1);
+  border-color: var(--bg-color1);
+  -webkit-box-shadow: -1px 0 0 0 var(--bg-color1);
+  box-shadow: -1px 0 0 0 var(--bg-color1);
+}
+
+.collapse {
+  border: solid 1px #DCDFE6;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+}
+
+.collapse>>>.el-collapse-item__header {
+  padding: 0 10px;
+}
+
+.collapse>>>.el-collapse-item__content {
+  padding: 20px 10px;
+}
+</style>
+

src/views/create/index.vue

@@ -1,345 +1,32 @@
 <template>
-  <div class="create app-pageContainer" style="min-height: 100vh;">
-    <!-- <Header /> -->
-
-    <div class="mx-auto" style="width: 60%;">
-      <div class="container mx-auto p-4">
-        <div class="flex flex-col gap-6">
-          <div class="text-2xl mt-6 font-semibold">{{ $route.query.id ? '编辑角色' : '创建角色' }}</div>
-          <div class="text-xl font-medium">基本信息</div>
-          <div class="text-xs text-gray-400">
-            这些信息在机器人描述中供其他用户查看
-          </div>
-          <el-form :model="form" :rules="rules" ref="form" label-width="60px" class="form">
-            <div class="flex gap-4">
-              <div class="w-1/3 flex justify-center">
-                <el-form-item label="" prop="picture" label-width="0">
-                  <ImageUpload v-model="form.picture" class="imgUp" :limit="1" />
-                </el-form-item>
-
-                <!-- <div class="bg-gray-600 p-4 rounded-lg flex items-center justify-center">
-
-                </div> -->
-                <!-- <div class="text-sm mt-2 text-center">
-                  支持PNG、JPG、JPEG、WebP及GIF格式的图片大小不超过10MB。
-                </div> -->
-              </div>
-              <div class="flex-1">
-                <div class="flex flex-col gap-4 ml-6 pb-4">
-                  <el-form-item label="名称" prop="characterName">
-                    <el-input v-model="form.characterName" placeholder="填写名称"></el-input>
-                  </el-form-item>
-                  <el-form-item label="简介" prop="prologue">
-                    <el-input v-model="form.prologue" type="textarea" :autosize="{ minRows: 3, maxRows: 3 }"
-                      placeholder="介绍一下你要值造的这个机器人。应段介绍只会是示在机器人的角色详情信息中，不会出现在提示词中，也不会影响到你的机器人。"></el-input>
-                  </el-form-item>
-                  <el-form-item label="性别" prop="sex">
-                    <el-radio-group v-model="form.sex">
-                      <el-radio label="0">男</el-radio>
-                      <el-radio label="1">女</el-radio>
-                    </el-radio-group>
-                  </el-form-item>
-                  <el-form-item label="类型" prop="type">
-                    <el-radio-group v-model="form.type">
-                      <el-radio :label="0">公开</el-radio>
-                      <el-radio :label="1">私密</el-radio>
-                    </el-radio-group>
-                  </el-form-item>
-                  <el-form-item label="标签" prop="labelId">
-                    <el-select v-model="form.labelId" multiple filterable placeholder="搜索并选择与你的机器人相关的标签">
-                      <el-option :label="item.labelName" :value="item.id" v-for="(item, index) in labelData"
-                        :key="index"></el-option>
-                    </el-select>
-                  </el-form-item>
-                </div>
-              </div>
-            </div>
-
-            <div class="text-xl font-medium my-6">机器人制作</div>
-            <div class="p-5 rounded-lg">
-              <el-form-item label="性格" label-width="80px" prop="characterPersonalityTags" style="margin-bottom: 20px;">
-                <el-select :multiple-limit="3" v-model="form.characterPersonalityTags" multiple filterable
-                  placeholder="搜索并选择与你的机器人性格（最多三个）">
-                  <el-option :label="item.personalityName" :value="item.id" v-for="(item, index) in personalityList"
-                    :key="index"></el-option>
-                </el-select>
-              </el-form-item>
-
-              <el-form-item label="模型" prop="modelId" label-width="80px" style="margin-bottom: 20px;">
-                <el-radio-group class="radio" v-model="form.modelId">
-                  <el-radio-button v-for="(item, index) in modelList" :key="index" :label="item.id">
-                    {{ item.model }}
-                  </el-radio-button>
-                </el-radio-group>
-              </el-form-item>
-
-              <el-form-item label="开场白" prop="firstContent" label-width="80px" style="margin-bottom: 20px;">
-                <el-input v-model="form.firstContent" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }"
-                  placeholder="帮您的机器人设计一段开场白吧"></el-input>
-              </el-form-item>
-              <el-form-item label="角色描述" prop="characterIntroduction" label-width="80px" style="margin-bottom: 20px;">
-                <el-input v-model="form.characterIntroduction" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }"
-                  placeholder="请在此处提供该角色的背景资讯。 使用'{char}'來指代您的角色。 例如：{char}是一个从小娇生惯养的大小姐。"></el-input>
-              </el-form-item>
-              <el-collapse class="collapse">
-                <el-collapse-item title="更多设置" name="1">
-                  <el-form-item label="场景" prop="scene" label-width="80px" style="margin-bottom: 20px;">
-                    <el-input v-model="form.scene" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }"
-                      placeholder="输入您的角色所处的场景，例如：{char}和{user}现在已经交往一个月了。"></el-input>
-                  </el-form-item>
-
-                  <el-form-item label="对话范例" prop="dialogue" label-width="80px">
-                    <el-input v-model="form.dialogue" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }"
-                      :placeholder="'例如\n<START>\n{user}:嗨，我听说你喜欢在酒吧消磨时间。\n{char}:*兴奋*天呐，是的！'"></el-input>
-                  </el-form-item>
-                </el-collapse-item>
-              </el-collapse>
-            </div>
-          </el-form>
-
-          <div class="flex justify-center">
-            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg" @click.prevent="submitForm">
-              提交
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div class="app-pageContainer">
+    <CreatePC v-if="!$store.state.app.isMobile" />
+    <CreateH5 v-else />
   </div>
 </template>
 
 <script>
-import { addCharacterApi, personalityListApi, updateCharacterApi } from "@/api/create.js"
-import { labelListApi } from "@/api/home.js"
-import { detailApi } from "@/api/detail.js"
+import CreatePC from "./createPC.vue"
+import CreateH5 from "./createH5.vue"
 
-import {
-  getModelListApi,
-} from "@/api/chat.js"
 export default {
+  name: "create",
   components: {
+    CreatePC,
+    CreateH5
   },
   data() {
     return {
-      modelList: [],
-      labelData: [],
-      personalityList: [],
-      form: {
-        modelId: null,
-        characterName: "",// 人物名称
-        characterIntroduction: "", //人物角色描述
-        characterPersonalityTags: [], //人物性格标签
-        firstContent: "", //首次聊天内容
-        labelId: [], //标签id
-        picture: "", //人物图片
-        prologue: "", //人物简介
-        sex: "", //性别（0男 1女）
-        type: "", //公开或私密（0公开 1私密）
-      },
-      rules: {
-        characterName: [
-          { required: true, message: "请输入名称", trigger: "change" },
-        ],
-        characterIntroduction: [
-          { required: true, message: "请输入人物描述", trigger: "change" },
-        ],
-        firstContent: [
-          { required: true, message: "请输入开场白", trigger: "change" },
-        ],
-        labelId: [
-          { required: true, message: "请选择标签", trigger: "change" },
-        ],
-        picture: [
-          { required: true, message: "请上传人物图片", trigger: "change" },
-        ],
-        prologue: [
-          { required: true, message: "请输入人物简介", trigger: "change" },
-        ],
-        sex: [
-          { required: true, message: "请选择性别", trigger: "change" },
-        ],
-        type: [
-          { required: true, message: "请选择类型", trigger: "change" },
-        ],
-        modelId: [
-          { required: true, message: "请选择模型", trigger: "change" },
-        ],
-      }
+
     }
   },
   mounted() {
 
-    this.getModelList()
-    this.getLabelList()
-    this.getPersonalityList()
-    console.log(this.$route.query.id, 'this.$route.query.id');
-    if (this.$route.query.id) {
-      detailApi(this.$route.query.id).then(res => {
-        console.log(res, '详情');
-        this.form = res.data
-      })
-    }
-    // console.log(this.$route.params.searchValue, 'this.$route.params.searchValue');
   },
   methods: {
 
-    getPersonalityList() {
-      let params = {
-        pageSize: 9999,
-        pageNum: 1
-      }
-      personalityListApi(params).then(res => {
-        console.log(res, '人物性格标签');
-        this.personalityList = res.rows
-      })
-    },
-    getModelList() {
-      getModelListApi().then(res => {
-        console.log(res, '模型列表');
-        this.modelList = res.data
-        this.form.modelId = this.modelList[0].id
-      })
-    },
-    async addCharacter() {
-      let data = {
-        name: this.form.name,
-        description: this.form.description,
-        character: this.form.character,
-        tags: this.form.tags,
-        image: this.form.image,
-        type: this.form.type,
-      }
-      let res = await addCharacterApi(data)
-      console.log(res, 'res');
-    },
-    getLabelList() {
-      let params = {
-        pageSize: 9999,
-        pageNum: 1
-      }
-      labelListApi(params).then(res => {
-        console.log(res, '标签列表');
-        this.labelData = res.rows
-      })
-    },
-    submitForm() {
-      this.$refs.form.validate((valid, object) => {
-        if (valid) {
-          if (this.form.id) {
-            updateCharacterApi(this.form).then(() => {
-              this.$message({
-                message: '编辑成功',
-                type: 'success'
-              });
-              this.$refs.form.resetFields()
-              this.$router.push('/profile')
-            })
-          } else {
-            addCharacterApi(this.form).then(() => {
-              this.$message({
-                message: '创建成功',
-                type: 'success'
-              });
-              this.$refs.form.resetFields()
-              this.$router.push('/profile')
-            })
-          }
-
-        } else {
-          console.log(object, 'object.keys() ');
-          let keys = Object.keys(object)
-          this.$modal.msgError(object[keys[0]][0].message);
-        }
-      })
-    },
-  }
-}
+  },
+};
 </script>
 
-<style lang="scss" scoped></style>
-<style scoped>
-.form>>>.el-form-item {
-  margin-bottom: 0px;
-}
-
-.form>>>.el-form-item__label,
-.form>>>.el-radio {
-  /* color: #fff; */
-}
-
-.form>>>.el-select {
-  width: 100%;
-}
-
-.form>>>.el-input__inner,
-.form>>>.el-textarea__inner,
-.form>>>.el-select__input {
-  width: 100%;
-  /* background-color: rgba(75, 85, 99, 1); */
-  /* color: #fff; */
-  border-radius: 0.5rem;
-  /* border-color: rgba(75, 85, 99, 0); */
-}
-
-.imgUp {}
-
-.imgUp>>>.el-upload__tip {
-  /* color: #b8b8b8; */
-  text-align: center;
-}
-
-.imgUp>>>.upload {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  /* padding: 20px;
-  background: rgba(75, 85, 99, 1);
-  border-radius: 10px; */
-}
-
-.imgUp>>>.el-upload {
-  /* border-radius: 50%; */
-}
-
-.imgUp>>>.el-upload-list__item {
-  /* border-radius: 50%; */
-}
-
-.radio>>>.el-radio-button {
-  margin-bottom: 5px;
-  margin-right: 10px;
-  /* border-left: solid 1px #DCDFE6; */
-}
-
-.radio>>>.el-radio-button__inner {
-  border-left: solid 1px #DCDFE6;
-  border-radius: 4px;
-}
-
-.radio>>>.el-radio-button__orig-radio:checked+.el-radio-button__inner {
-  border-left: solid 1px var(--bg-color1);
-  background-color: var(--bg-color1);
-  border-color: var(--bg-color1);
-  -webkit-box-shadow: -1px 0 0 0 var(--bg-color1);
-  box-shadow: -1px 0 0 0 var(--bg-color1);
-}
-
-.collapse {
-  border: solid 1px #DCDFE6;
-  background: #fff;
-  border-radius: 10px;
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.12);
-  overflow: hidden;
-}
-
-.collapse>>>.el-collapse-item__header {
-  padding: 0 10px;
-}
-
-.collapse>>>.el-collapse-item__content {
-  padding: 20px 10px;
-}
-</style>
-
+<style scoped lang="scss"></style>