diff --git a/src/apis/paths/api.ts b/src/apis/paths/api.ts
index 18d1d8d047007e6af6c13a0ca87bc39807e598fa..b274e528d0b2375ced1469cd52efc3946e99e875 100644
--- a/src/apis/paths/api.ts
+++ b/src/apis/paths/api.ts
@@ -1,164 +1,59 @@
 // Copyright (c) Huawei Technologies Co., Ltd. 2023-2024. All rights reserved.
-// licensed under the Mulan PSL v2.
-// You can use this software according to the terms and conditions of the Mulan PSL v2.
-// You may obtain a copy of Mulan PSL v2 at:
-//      http://license.coscl.org.cn/MulanPSL2
-// THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR
-// PURPOSE.
-// See the Mulan PSL v2 for more details.
-import { get, post, del, put } from 'src/apis/server';
+import { post, get, del, put } from 'src/apis/server';
 import type { FcResponse } from 'src/apis/server';
-import { ApiMessage, Service } from './type';
-
+import { QueryApiListParamsType, CreateOrUpdateApiParamsType } from './type';
 /**
- * 查询服务下接口信息
+ * 获取语义接口列表
+ * @param params
  * @returns
  */
-export const getApiMessageByServiceId = (
-    serviceId: string,
-    page: number,
-    pageSize: number,
-): Promise<
-  [
-    any,
-    (
-      | FcResponse<{
-        serviceId: string;
-        name: string;
-        apis: ApiMessage[];
-        }>
-      | undefined
-    )
-  ]
-> => {
-  return get(`/api/service/${serviceId}/key`,{page, pageSize});
+// 导出一个函数queryApiList，用于查询API列表
+export const queryApiList = (params: QueryApiListParamsType): Promise<[any, FcResponse<unknown> | undefined]> => {
+  // 调用get函数，传入/api/service路径和params参数，返回一个Promise对象
+  return get('/api/service', params);
 };
 
 /**
- * 查询语义服务列表
+ * 创建语义接口/更新语义接口
+ * @param params
  * @returns
  */
-export const getApiMessageList = (params: {
-  createdByMe?: string;
-  favorited?: string;
-  searchType?: string;
-  keyword?: string;
-  page?: number;
-  pageSize?: number;
-}
-  ): Promise<
-    [
-      any,
-      (
-        | FcResponse<{  
-            services: Service[];
-        }>
-        | undefined
-      )
-    ]
-  > => {
-    return get('/api/auth/key',{
-      ...params
-    });
-  };
+export const createOrUpdateApi = (
+  params: CreateOrUpdateApiParamsType,
+): Promise<[any, FcResponse<unknown> | undefined]> => {
+  return post('/api/service', params);
+};
 
 /**
- * 通过上传 YAML 文本创建/编辑服务
+ * 获取指定语义接口数据
+ * @param params
  * @returns
  */
-export const uploadYAML = (params: {
-    serviceId?: string;
-    yaml: string;
-  }
-    ): Promise<
-      [
-        any,
-        (
-          | FcResponse<{  
-            serviceId: string;
-            name: string;
-            apis: ApiMessage[];
-          }>
-          | undefined
-        )
-      ]
-    > => {
-      return post('/api/service',{
-        ...params
-      });
-    };
+export const querySingleApiData = (params: { serviceId: string }): Promise<[any, FcResponse<unknown> | undefined]> => {
+  return get(`/api/service/${params.serviceId}`);
+};
 
 /**
- * 获取指定服务的详细信息及 YAML 内容
+ * 删除语义接口
+ * @param params
  * @returns
  */
-export const getYAMLByServiceId = (params: {
-    serviceId: string;
-  }
-    ): Promise<
-      [
-        any,
-        (
-          | FcResponse<{  
-            serviceId: string;
-            name: string;
-            yaml: string;
-          }>
-          | undefined
-        )
-      ]
-    > => {
-      return get(`/api/service/${params.serviceId}`)
-    };
+export const deleteSingleApiData = (params: { serviceId: string }): Promise<[any, FcResponse<unknown> | undefined]> => {
+  return del(`/api/service/${params.serviceId}`, params);
+};
 
 /**
- * 删除指定服务
- * @returns
- */
-export const deleteYAMLByServiceId = (params: {
-    serviceId: string;
-  }
-    ): Promise<
-      [
-        any,
-        (
-          | FcResponse<{  
-            serviceId: string;
-          }>
-          | undefined
-        )
-      ]
-    > => {
-      return del(`/api/service/${params.serviceId}`);
-    };
-    
-/**
- * 更改服务收藏状态
+ * 更改语义接口收藏状态
+ * @param params
  * @returns
  */
-export const likeServiceByServiceId = (params: {
-    serviceId: string;
-  }
-    ): Promise<
-      [
-        any,
-        (
-          | FcResponse<{  
-            serviceId: string;
-          }>
-          | undefined
-        )
-      ]
-    > => {
-      return put(`/api/service/${params.serviceId}`);
-    };
-
-export const apiApi = {
-  getApiMessageByServiceId,
-  getApiMessageList,
-  uploadYAML,
-  getYAMLByServiceId,
-  deleteYAMLByServiceId,
-  likeServiceByServiceId,
+export const changeSingleApiCollect = (params: { serviceId: string,favorited:boolean }): Promise<[any, FcResponse<unknown> | undefined]> => {
+  return put(`/api/service/${params.serviceId}`, {favorited:params.favorited});
 };
+export const apiApi = {
+  queryApiList,
+  createOrUpdateApi,
+  querySingleApiData,
+  deleteSingleApiData,
+  changeSingleApiCollect
+};
\ No newline at end of file
diff --git a/src/apis/paths/type.ts b/src/apis/paths/type.ts
index 3fbfbb6284796cacb530ae7973035379007625b1..3659c300d9361a427daff433f43842bbfe1e3998 100644
--- a/src/apis/paths/type.ts
+++ b/src/apis/paths/type.ts
@@ -76,7 +76,7 @@ export interface Suggest {
 export interface ConversationListItem {
     conversationId: string,
     createdTime: string,
-    doc_count: number,
+    docCount: number,
     title: string,
 }
 
@@ -88,7 +88,7 @@ export interface ConversationList {
 }
 
 /*
- * 应用数据结构
+ * 语义接口数据结构
  */
 export interface Application {
     appId: string,
@@ -96,7 +96,7 @@ export interface Application {
 }
 
 /*
- * 语意接口数据结构
+ * 语义接口数据结构
  */
 export interface ApiMessage {
     apiId: string,
@@ -107,7 +107,7 @@ export interface ApiMessage {
 }
 
 /*
- * 语意接口数据结构
+ * 语义接口数据结构
  */
 export interface Service {
     serviceId: string,
@@ -116,4 +116,60 @@ export interface Service {
     author: string,
     description: string,
     favorite: boolean,
-}
\ No newline at end of file
+}
+
+export interface QueryApiListParamsType {
+    /**
+     * 筛选“我创建的”语义接口
+     */
+    createdByMe?: boolean;
+    /**
+     * 筛选“我收藏的”语义接口
+     */
+    favorited?: boolean;
+    /**
+     * 搜索关键字
+     */
+    keyword?: string;
+    /**
+     * 页码
+     */
+    page?: number;
+    /**
+     * 每页数量
+     */
+    pageSize?: number;
+    /**
+     * 搜索类型：全部字段或仅按名称/简介/作者字段；若不填，则视为 'all'
+     */
+    searchType?: SearchType;
+    [property: string]: any;
+}
+
+/**
+ * 搜索类型：全部字段或仅按名称/简介/作者字段；若不填，则视为 'all'
+ */
+export enum SearchType {
+    All = "all",
+    Author = "author",
+    Description = "description",
+    Name = "name",
+}
+
+/**
+ * CreateAppRequest, 创建/更新语义接口请求数据结构
+ */
+export interface CreateOrUpdateApiParamsType {
+    /**
+     * 语义接口ID
+     */
+    serviceId?: string;
+    /**
+     * 语义接口yaml 文件（json 格式）
+     */
+    data?: string;
+    /**
+     * 对话轮次（1～10）
+     */
+    [property: string]: any;
+}
diff --git a/src/apis/tools.ts b/src/apis/tools.ts
index 45a361af42801bb615df909208461d51dcbf1bee..2e51c733c75e34e100e4f148011652e8e46a4a72 100644
--- a/src/apis/tools.ts
+++ b/src/apis/tools.ts
@@ -76,7 +76,7 @@ export const handleAuthorize = async (errStatus: number): Promise<void> => {
     window.open(LOGOUT_CALLBACK_URL, '_self');
   }
   else{
-    errorMsg(`${errStatus} is error`);
+    // errorMsg(`${errStatus} is error`);
   }
 };
 
diff --git a/src/assets/styles/theme.scss b/src/assets/styles/theme.scss
index 6d8b29e111cfea48695ae91c16db829c1b613e6b..3156f92477133568703e345adb5f8b26f2ef30bb 100644
--- a/src/assets/styles/theme.scss
+++ b/src/assets/styles/theme.scss
@@ -22,6 +22,9 @@ body[theme='dark'] {
   --flow-node-error-over-color: #332127;
   --flow-branch-node-error-node-cover-color: #602c27;
   --flow-branch-node-success-node-cover-color: #295336;
+  --o-think-border:#8d98aa;
+  --o-think-header-bg:#2a2f37;
+  --o-think-header-text:#e4e8ee;
 }
 
 body[theme='light'] {
@@ -46,6 +49,9 @@ body[theme='light'] {
   --flow-node-boder-default-over: #c7d6f5;
   --flow-node-success-over-color: #e6f6e9;
   --flow-node-error-over-color: #f8e7e7;
+  --o-think-border:#ccc;
+  --o-think-header-bg:#f8f8f8;
+  --o-think-header-text:#8d98aa;
   --flow-branch-node-error-node-cover-color: #edb3b3;
   --flow-branch-node-success-node-cover-color: #b3dbb8;
 }
diff --git a/src/components/Upload/index.vue b/src/components/Upload/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..90accc465d3ed421a510a0b2fca61bd8fb898f27
--- /dev/null
+++ b/src/components/Upload/index.vue
@@ -0,0 +1,328 @@
+<script lang="ts" setup>
+import { ElMessage } from 'element-plus';
+import { ref, watch } from 'vue';
+import * as jsYaml from 'js-yaml';
+import { IconUpload, IconVisible, IconDelete } from '@computing/opendesign-icons';
+import type {
+  UploadFile,
+  ElUploadProgressEvent,
+  ElFile,
+} from 'element-plus/es/components/upload/src/upload.type';
+import { Codemirror } from 'vue-codemirror';
+import { onMounted } from 'vue';
+import { api } from 'src/apis';
+
+const handleUploadMyFile = (options: any) => {
+  console.log(options);
+};
+
+const handleCreateapi = (data: any) => {
+  console.log(data);
+  api
+    .createOrUpdateApi({
+      serviceId:'',
+      data
+    })
+    .then(res => {
+     console.log(res);
+     getYamlJson.value = res.data;
+     uploadtype.value = 'get';
+    });
+};
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: '',
+  },
+  disable: {
+    type: Boolean,
+    default: false,
+  },
+  closeDrawer: {
+    type: Function,
+    default: () => {},
+  },
+});
+const emits = defineEmits<{
+  (e: 'closeDrawer'): void;
+}>();
+
+const handleClose = () => {
+  //清空数据
+  yamlContent.value = '';
+  yamlToJsonContent.value = '';
+  getYamlJson.value = '';
+  emits('closeDrawer');
+};
+
+const uploadtype = ref(props.type);
+
+const yamlContent = ref('tt:123');
+const yamlToJsonContent = ref('');
+const getYamlJson = ref('');
+const imageUrl = ref('');
+const progressVal = ref(0);
+const uploadDone = ref(false);
+// 上传前检查
+const beforeUpload = async (file: ElFile) => {
+  const isYaml = file.type === 'application/x-yaml' || file.type === 'text/yaml'; // 也可能遇到 text/yaml 类型
+  const isLt2M = file.size / 1024 / 1024 < 2;
+  if (!isYaml) {
+    ElMessage({
+      message: 'File must be YAML format!',
+      type: 'error',
+    });
+    return false;
+  }
+  if (!isLt2M) {
+    ElMessage({
+      message: 'YAML size cannot exceed 2MB!',
+      type: 'error',
+    });
+    return false;
+  }
+
+  try {
+    const reader = new FileReader();
+    reader.onload = async event => {
+      yamlContent.value = event.target?.result as string;
+      //yaml 展示
+      console.log('YAML Content:', yamlContent);
+      try {
+        // emits('changeAction',"edit");
+        yamlToJsonContent.value = jsYaml.load(yamlContent.value);
+        uploadtype.value = 'edit';
+      } catch (yamlParseError) {
+        console.error('Error parsing YAML to JSON:', yamlParseError);
+      }
+    };
+
+    reader.onerror = error => {
+      console.error('Error reading file:', error);
+      ElMessage({
+        message: 'Error reading file!',
+        type: 'error',
+      });
+    };
+
+    // 开始读取文件内容
+    await new Promise((resolve, reject) => {
+      reader.readAsText(file);
+      reader.onloadend = () => resolve(); // 当读取完成时解决 Promise
+      reader.onerror = error => reject(error); // 如果出错则拒绝 Promise
+    });
+    return true; 
+  } catch (error) {
+    console.error('Error during file upload process:', error);
+    ElMessage({
+      message: 'An error occurred during file upload!',
+      type: 'error',
+    });
+    return false; // 同样，这行在当前的 async 函数中可能没有实际意义
+  }
+};
+
+const beforeUploadPromise = (fileWrapper: { file: File }): Promise<boolean> => {
+  return new Promise((resolve, reject) => {
+    // ...（上面的异步逻辑，但在最后调用 resolve(true) 或 reject(false)）
+  });
+};
+// 上传进度
+const handleProgress = (event: ElUploadProgressEvent) => {
+  progressVal.value = event.percent;
+};
+// 上传完成
+const handleSuccess = (res: ElUploadProgressEvent, file: UploadFile) => {
+  uploadDone.value = true;
+  progressVal.value = 0;
+};
+const doDelete = (e: Event) => {
+  e.stopPropagation();
+  console.log('click Delete');
+  imageUrl.value = '';
+  uploadDone.value = false;
+};
+const doPreview = (e: Event) => {
+  e.stopPropagation();
+};
+
+onMounted(() => {
+  console.log(props);
+});
+
+</script>
+<template>
+  <el-upload
+    v-if="uploadtype === 'upload'"
+    action=""
+    drag
+    multiple
+    :show-file-list="false"
+    :on-success="handleSuccess"
+    :before-upload="beforeUpload"
+    :http-request="doUpload"
+    :on-progress="handleProgress"
+    class=""
+  >
+    <div class="upload-box">
+      <div v-if="imageUrl" class="upload-preview">
+        <img :src="imageUrl" class="upload-preview-img" />
+        <div class="upload-btns" @click.stop>
+          <el-icon class="btn" @click="doPreview">
+            <IconVisible />
+          </el-icon>
+          <el-icon class="btn" @click="doDelete">
+            <IconDelete />
+          </el-icon>
+        </div>
+      </div>
+      <div v-else class="upload-add">
+        <el-icon class="upload-btn-icon">
+          <IconUpload />
+        </el-icon>
+        <div class="upload-tip">
+          将文件拖拽到此处 或
+          <div style="margin-top: 16px">
+            <el-button type="primary" size="small">选择文件</el-button>
+          </div>
+        </div>
+        <div class="upload-tip">格式: YAML, 大小 &lt; 2M</div>
+      </div>
+      <div v-if="progressVal && !uploadDone" class="upload-loading">
+        <el-progress class="uplaod-progress" :percentage="progressVal" :stroke-width="8" />
+      </div>
+    </div>
+  </el-upload>
+  <div class="code-container" v-if="uploadtype !== 'upload'">
+    <Codemirror
+      v-model="yamlContent"
+      placeholder="Code goes here..."
+      :autofocus="true"
+      :indent-with-tab="true"
+      :tab-size="2"
+      :extensions="extensions"
+      :disabled="disabled"
+      @ready="handleReady"
+    />
+  </div>
+  <div class="code-container" v-if="uploadtype !== 'get'">
+    {{ getYamlJson }}
+  </div>
+  <div class="drawerFooter" v-if="uploadtype === 'upload'">
+    <el-button @click="handleClose">取消</el-button>
+    <el-button type="primary" @click="handleClose">确定</el-button>
+  </div>
+  <div class="drawerFooter" v-if="uploadtype === 'edit'">
+    <el-button @click="handleClose">取消</el-button>
+    <el-button @click="handleClose">编辑</el-button>
+    <el-button type="primary" @click="handleCreateapi(yamlToJsonContent)">解析</el-button>
+  </div>
+  <div class="drawerFooter" v-if="uploadtype === 'get'">
+    <el-button @click="handleClose">取消</el-button>
+    <el-button type="primary" @click="handleClose">确定</el-button>
+  </div>
+</template>
+
+<style scoped>
+.v-codemirror {
+  height: 100%;
+  width: 100%;
+  .cm-editor {
+    height: 100%;
+    border: 1px solid var(--o-time-text);
+    .cm-gutters {
+      background-color: var(--o-bash-bg);
+    }
+  }
+  .cm-focused {
+    outline: none;
+  }
+}
+
+.drawerFooter {
+  position: absolute;
+  bottom: 12px;
+  right: 12px;
+}
+.upload-box {
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  width: 400px;
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.upload-btn-icon {
+  font-size: 64px;
+  color: var(--o-text-color-tertiary);
+}
+
+.upload-tip {
+  width: 100%;
+  font-size: var(--o-font-size-info);
+  color: var(--o-text-color-tertiary);
+}
+
+.upload-tip + .upload-tip {
+  margin-top: 24px;
+}
+
+.upload-preview {
+  width: 100%;
+  height: 100%;
+}
+
+.upload-preview-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.upload-btns {
+  display: flex;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  top: 0;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--o-bg-color-mask);
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.upload-preview:hover .upload-btns {
+  opacity: 1;
+}
+
+.upload-btns .btn {
+  font-size: var(--o-font-size-subtitle);
+  margin: 8px;
+  color: var(--o-text-color-fourth);
+}
+
+.upload-btns .btn:hover {
+  color: var(--o-color-primary);
+}
+
+.upload-loading {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background-color: var(--o-bg-color-mask);
+}
+
+.uplaod-progress {
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  bottom: 8px;
+}
+</style>
diff --git a/src/components/dialoguePanel/DialogueThought.vue b/src/components/dialoguePanel/DialogueThought.vue
index 9c2b174fb46c6c8c2378fafd9da6d6d73ed4dcd6..12b3a6749a511823c3d072f53fde8d674bae3a7b 100644
--- a/src/components/dialoguePanel/DialogueThought.vue
+++ b/src/components/dialoguePanel/DialogueThought.vue
@@ -4,7 +4,9 @@
       <!-- <span class="think-label">think</span> -->
       <div class="collapse-control">
         <div :class="{ 'is-collapsed': isCollapsed }" class="collapse-icon">
-          <img src="@/assets/images/flow_arrow.png" alt="" class="o-collapse-icon" />
+           <el-icon>
+            <IconCaretDown/>
+           </el-icon>
         </div>
         <span class="collapse-text">思考</span>
       </div>
@@ -16,6 +18,7 @@
 </template>
 
 <script setup>
+import { IconCaretDown } from '@computing/opendesign-icons';
 import { ref, computed } from 'vue';
 import marked from 'src/utils/marked.js';
 import xss from 'xss';
diff --git a/src/components/dialoguePanel/FlowCode.vue b/src/components/dialoguePanel/FlowCode.vue
index 144c47defd51432b7343b67ea33fe912343ea633..9ebde49c5b2410bc40ad8e8daba9f51a1d7155d0 100644
--- a/src/components/dialoguePanel/FlowCode.vue
+++ b/src/components/dialoguePanel/FlowCode.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, withDefaults, watch,shallowRef, reactive } from 'vue';
 import { Codemirror } from 'vue-codemirror';
-import { StreamLanguage } from '@codemirror/language';
 import { json } from '@codemirror/lang-json';
 import { oneDark } from '@codemirror/theme-one-dark'
 import { useHistorySessionStore } from 'src/store';
diff --git a/src/i18n/lang/en.ts b/src/i18n/lang/en.ts
index 28c098c796e7ea9c790b3bff190465770147fd73..9cdc45e7f3b9af4e5edf60aee932f63a695da79a 100644
--- a/src/i18n/lang/en.ts
+++ b/src/i18n/lang/en.ts
@@ -37,7 +37,7 @@ export default {
       service_agreement:"Service Agreement",
       privacy_policy:"Privacy Policy",
       contact_us:"Contact Us",
-      version:"Version 1.0.0"
+      version:"Version 0.9.5"
     },
     history:{
       new_chat: "New Chat",  
diff --git a/src/i18n/lang/zh-cn.ts b/src/i18n/lang/zh-cn.ts
index e1e7cb81cca05dcf0762225e72b9c4fc1c6f8d04..402b6f4ca342dc0920e36c42ed53f7dd045c1a7a 100644
--- a/src/i18n/lang/zh-cn.ts
+++ b/src/i18n/lang/zh-cn.ts
@@ -37,7 +37,7 @@ export default {
     service_agreement: "服务协议",
     privacy_policy: "隐私政策",
     contact_us: "联系我们",
-    version: "版本号0.9.1-内测版"
+    version: "版本号0.9.5-内测版"
   },
   history: {
     new_chat: "新建对话",
diff --git a/src/store/historySession.ts b/src/store/historySession.ts
index e106a7e3de6d60c8a66c29038ddac9438ab39bda..3d2a8c9cff9869be2a741fcf59edf91e69439b0e 100644
--- a/src/store/historySession.ts
+++ b/src/store/historySession.ts
@@ -106,7 +106,7 @@ export const useHistorySessionStore = defineStore('sessionStore', () => {
         conversationId: item.conversationId,
         createdTime: item.createdTime,
         title: item.title,
-        docCount: item.doc_count || 0,
+        docCount: item.docCount || 0,
       }));
       if (res.result.conversations.length === 0) {
         await generateSession();
diff --git a/src/views/api/index.vue b/src/views/api/index.vue
index 230ec2166329b4fe371cf33fb02a035eb6b442bf..f97c2cf8d9cf1ad6781097f4cbca95f02d6ade5e 100644
--- a/src/views/api/index.vue
+++ b/src/views/api/index.vue
@@ -1,41 +1,61 @@
 <template>
-  <div class="appCenterBox">
-    <div class="appCenterMain">
-      <div class="appCenterTitle">语义接口中心</div>
-      <div class="appCenterSearch">
+  <div class="apiCenterBox">
+    <div class="apiCenterMain">
+      <div class="apiCenterTitle">语义接口中心</div>
+      <div class="apiCenterSearch">
         <el-input style="max-width: 400px" placeholder="搜索" :suffix-icon="IconSearch">
           <template #prepend>
-            <el-select placeholder="全部" style="width: 115px" :suffix-icon="IconCaretDown">
-              <el-option label="Restaurant" value="1" />
-              <el-option label="Order No." value="2" />
-              <el-option label="Tel" value="3" />
+            <el-select v-model="apiSearchType" style="width: 115px" :suffix-icon="IconCaretDown">
+              <el-option label="全部" value="all" />
+              <el-option label="接口名称" value="name" />
+              <el-option label="接口简介" value="description" />
+              <el-option label="用户名称" value="author" />
             </el-select>
           </template>
         </el-input>
-        <el-button type="primary" class="createApp" @click="openSidebar">上传</el-button>
+        <el-button type="primary" class="createapi" @click="openSidebar('upload')">上传</el-button>
       </div>
-      <div class="appCenterType">
-        <div class="appCenterBtn appCenterBtnActive">全部接口</div>
-        <div class="appCenterBtn">我的上传</div>
-        <div class="appCenterBtn">我的收藏</div>
+      <div class="apiCenterType">
+        <div class="apiCenterBtn" :class="{ apiCenterBtnActive: apiType === 'my' }" @click="handleSearchapiList('my')">
+          全部接口
+        </div>
+        <div
+          class="apiCenterBtn"
+          :class="{ apiCenterBtnActive: apiType === 'createdByMe' }"
+          @click="handleSearchapiList('createdByMe')"
+        >
+        我的上传
+        </div>
+        <div
+          class="apiCenterBtn"
+          :class="{ apiCenterBtnActive: apiType === 'favorited' }"
+          @click="handleSearchapiList('favorited')"
+        >
+          我的收藏
+        </div>
       </div>
-      <div class="appCenterCardContainer">
-        <div class="appCenterCardBox">
-          <div v-for="appItem in appList" class="appCenterCardSingle">
-            <div class="appCenterCardTop" @click="router.push(`/copilot?appId=123&name=234`)">
-              <div class="appCenterCardIcon">
+      <div class="apiCenterCardContainer">
+        <div class="apiCenterCardBox">
+          <div v-for="apiItem in apiList" class="apiCenterCardSingle">
+            <div class="apiCenterCardTop" @click="openSidebar('get')">
+              <div class="apiCenterCardIcon">
                 <el-icon class="menu-icon"
                   ><img class="create-button__icon" src="@/assets/svgs/robot_icon.svg"
                 /></el-icon>
               </div>
-              <div class="appCenterCardContent">
-                <div class="appCenterCardContentTop">
-                  <div class="appCenterCardContentTitle">智能助手</div>
-                  <div class="appCenterCardContentCollect">
-                    <IconUnfavorite />
+              <div class="apiCenterCardContent">
+                <div class="apiCenterCardContentTop">
+                  <div class="apiCenterCardContentTitle">智能助手</div>
+                  <div
+                    class="apiCenterCardContentCollect"
+                    :class="!apiItem.published && apiType === 'createdByMe' ? 'noClick' : ''"
+                    @click.stop="handleFavorite($event, apiItem)"
+                  >
+                    <IconFavorite v-if="apiItem.favorited" class="apiFavorite" />
+                    <IconUnfavorite v-else="apiItem.favorited" />
                   </div>
                 </div>
-                <div class="appCenterCardContentDes">
+                <div class="apiCenterCardContentDes">
                   <TextMoreTootip
                     value="测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试"
                     :row="2"
@@ -43,10 +63,10 @@
                 </div>
               </div>
             </div>
-            <div class="appCenterCardBottom">
-              <div class="appCenterCardUser">@zhang</div>
-              <div class="appCenterCardOps">
-                <el-button text>编辑</el-button>
+            <div class="apiCenterCardBottom">
+              <div class="apiCenterCardUser">@zhang</div>
+              <div class="apiCenterCardOps">
+                <el-button text @click="openSidebar('edit')">编辑</el-button>
                 <el-button text>删除</el-button>
               </div>
             </div>
@@ -54,37 +74,230 @@
         </div>
       </div>
     </div>
-    <el-drawer v-model="drawer" title="上传语义接口" :direction="direction" :before-close="handleClose"> </el-drawer>
+    <el-drawer class="el-drawer" v-model="drawer" :title="actionName" :direction="direction" :before-close="handleClose">
+      <div v-if="actions === 'upload'">
+        <Upload
+        type="upload"
+        @closeDrawer="handleClose" />
+      </div>
+      <div v-if="actions === 'get'">
+        <Upload
+        type="get"
+        @closeDrawer="handleClose" />
+      </div>
+      <div v-if="actions === 'edit'">
+        <Upload
+        type="edit"
+        @closeDrawer="handleClose" />
+      </div>
+    </el-drawer>
   </div>
 </template>
 <script setup lang="ts">
-import TextMoreTootip from '@/components/textMoreTootip/index.vue';
 import { IconCaretDown, IconSearch, IconFavorite, IconUnfavorite } from '@computing/opendesign-icons';
 import './style.scss';
-import { reactive, ref } from 'vue';
-import router from 'src/router';
-const appList = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
+import TextMoreTootip from '@/components/textMoreTootip/index.vue';
+import { ref, onMounted, watch, markRaw } from 'vue';
+import { useRouter } from 'vue-router';
+import { api } from 'src/apis';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { IconAlarm } from '@computing/opendesign-icons';
+import Upload from "@/components/Upload/index.vue";
+
+const apiList = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
 const drawer = ref(false);
 const direction = ref('rtl');
+const actionName = ref('');
+const router = useRouter();
+const actions = ref();
+const apiType = ref('my');
+const apiSearchType = ref('all');
+const apiSearchValue = ref();
+const pagination = ref({
+  pageSizes: [16, 32, 64],
+  layout: 'total,sizes,prev,pager,next,jumper',
+});
+const currentPage = ref(1);
+const totalCount = ref(0);
+const currentPageSize = ref(pagination.value.pageSizes[0]);
+
+const handleChangePage = (pageNum: number, pageSize: number) => {
+  currentPage.value = pageNum;
+  currentPageSize.value = pageSize;
+  handleParmasQueryapiList();
+};
 
-const openSidebar = () => {
+const openSidebar = (action: string) => {
   drawer.value = true;
+  actions.value = action;
+  if( action === 'upload') {
+    // 展示上传的框架
+    actionName.value = '上传语义接口';
+  }else if( action === 'edit') {
+    // 展示编辑的框架
+    actionName.value = '编辑语义接口';
+  }else if( action === 'get'){
+    // 展示查看的框架
+    actionName.value = '查看语义接口';
+  }
+};
+
+const handleClose = () => {
+  drawer.value = false;
+};
+
+const handleCreateapi = (data: any) => {
+  api
+    .createOrUpdateApi({
+      serviceId:'',
+      data
+    })
+    .then(res => {
+     console.log(res);
+    });
 };
 
-const handleClose = done => {
-  done();
+const routerToDetail = apiItem => {
+  //获取apiItem.id & apiItem.name
+  router.push(`/copilot?apiId=${apiItem.apiId}&name=${encodeURIComponent(encodeURI(apiItem.name))}`);
 };
+
+const handleParmasQueryapiList = (params?: any) => {
+  let payload = {};
+  if (apiType.value !== 'my') {
+    payload[apiType.value] = true;
+  }
+  handleQueryApiList({
+    searchType: apiSearchType.value,
+    keyword: apiSearchValue.value,
+    ...payload,
+    ...params,
+  });
+};
+
+const handleQueryApiList = (payload?: any) => {
+  api
+    .queryApiList({
+      page: currentPage.value,
+      pageSize: currentPageSize.value,
+      ...payload,
+    })
+    .then(res => {
+      apiList.value = res[1]?.result.apilications;
+      currentPage.value = res[1]?.result.currentPage;
+      totalCount.value = res[1]?.result.totalapis;
+    });
+};
+
+const handleFavorite = (e, item) => {
+  // 未发布的不可收藏
+  if (!item.published && apiType.value === 'createdByMe') {
+    return;
+  }
+  e.stopPropagation();
+  api
+    .changeSingleApiCollect({
+      serviceId: item.apiId,
+      favorited: !item.favorited,
+    })
+    .then(res => {
+      handleParmasQueryapiList();
+    });
+};
+
+const handleSearchapiList = type => {
+  apiType.value = type;
+  if (type === 'my') {
+    handleParmasQueryapiList();
+  } else {
+    currentPage.value = 1;
+    currentPageSize.value = 16;
+    handleParmasQueryapiList({
+      [type]: true,
+    });
+  }
+};
+
+const handleDelapi = (e, item) => {
+  e.stopPropagation();
+  ElMessageBox.confirm('确定删除此接口吗？', '提示', {
+    type: 'warning',
+    icon: markRaw(IconAlarm),
+  }).then(() => {
+    api
+      .deleteSingleApiData({
+        serviceId: item.apiId,
+      })
+      .then(res => {
+        if (res[1]) {
+          ElMessage({
+            showClose: true,
+            message: '删除成功',
+            icon: IconSuccess,
+            customClass: 'o-message--success',
+            duration: 3000,
+          });
+          handleParmasQueryapiList();
+        }
+      });
+  });
+};
+
+const handleEditapi = (e, item) => {
+  e.stopPropagation();
+  router.push(`/createapi?apiId=${item.apiId}`);
+};
+
+watch(
+  () => [apiSearchValue, apiSearchType],
+  () => {
+    handleParmasQueryapiList();
+  },
+  { deep: true },
+);
+
+onMounted(() => {
+  handleQueryApiList();
+});
 </script>
-<style scoped>
-.container {
-  width: 100vw;
-  height: 100vh;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+<style lang="scss" scoped>
+.el-drawer{
+  margin: 0px;
+  padding: 0px;
+}
+.apiCenterCardSingle {
+  position: relative;
+  .unPublishSymbol {
+    position: absolute;
+    width: 56px;
+    height: 16px;
+    display: flex;
+    left: 8px;
+    top: -4px;
+    .coverIcon {
+      width: 0px;
+      height: 0px;
+      border: 2px;
+      border-color: #5481de #5481de transparent transparent;
+      border-left: 2px solid transparent;
+      border-top: 2px solid transparent;
+      border-right: 2px solid #5481de;
+      border-bottom: 2px solid #5481de;
+    }
+    .textDesc {
+      flex: 1;
+      line-height: 16px;
+      color: #fff;
+      text-align: center;
+      font-size: 12px;
+      border-top-right-radius: 4px;
+      border-bottom-left-radius: 4px;
+      background: #6395fd;
+    }
+  }
+  .noClick {
+    cursor: not-allowed;
+  }
 }
 
 img {
diff --git a/src/views/api/style.scss b/src/views/api/style.scss
index 7ee635ab20f6b228b7801e17469dddd3589dbcd9..ba203f297b36b23e266be9b41c952f93155ca830 100644
--- a/src/views/api/style.scss
+++ b/src/views/api/style.scss
@@ -1,40 +1,41 @@
-.appCenterBox {
+.apiCenterBox {
   display: flex;
   justify-content: center;
-  width: 100%;
-  .appCenterMain {
+  min-width: 1032px;
+  .apiCenterMain {
     color: var(--o-text-color-secondary);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     margin-top: 48px;
-    .appCenterTitle {
+    .apiCenterTitle {
       color: var(--o-text-color-primary);
       font-size: 24px;
       font-weight: 700;
       line-height: 36px;
       margin-bottom: 16px;
     }
-    .appCenterSearch {
-      margin-bottom: 34px;
-      :first-of-type .el-input__wrapper {
+    .apiCenterSearch {
+      display: flex;
+      margin-bottom: 32px;
+      :first-of-type .el-input__wrapier {
         width: 280px;
         border-radius: 0px 4px 4px 0px;
       }
       .el-input-group__prepend {
         border-radius: 4px 0px 0px 4px;
-        .el-input__wrapper {
+        .el-input__wrapier {
           border-radius: 4px 0px 0px 4px;
         }
       }
 
-      .createApp {
+      .createapi {
         margin-left: 16px;
       }
     }
 
-    .appCenterType {
+    .apiCenterType {
       display: flex;
       width: 400px;
       height: 32px;
@@ -43,7 +44,7 @@
       gap: 2px;
       border-radius: 4px;
       background-color: var(--o-border-color-base);
-      .appCenterBtn {
+      .apiCenterBtn {
         width: 130px;
         height: 28px;
         display: flex;
@@ -55,43 +56,53 @@
         color: var(--o-text-color-primary);
       }
     }
-    .appCenterCardContainer {
-      margin-top: 16px;
-      width: fit-content;
+    .apiCenterCardContainer {
+      padding-top: 16px;
       max-width: 1336px;
-      .appCenterCardBox {
+      max-height: calc(100vh - 327px);
+      overflow-y: scroll;
+      .apiCenterCardBox {
         width: fit-content;
         display: flex;
         flex-wrap: wrap;
+        box-sizing: border-box;
         gap: 16px;
-        .appCenterCardSingle {
+        .apiCenterCardSingle {
+          box-sizing: border-box;
+          border: 1px solid transparent;
+          cursor: pointer;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
           border-radius: 8px;
           width: 320px;
           height: 136px;
           padding: 16px;
           background-color: var(--o-bg-color-base);
-          .appCenterCardTop {
+          .apiCenterCardTop {
             display: flex;
-            .appCenterCardIcon {
+            .apiCenterCardIcon {
               width: 80px;
+              display: flex;
+              align-items: center;
               .menu-icon {
                 width: 40px;
               }
             }
-            .appCenterCardContent {
+            .apiCenterCardContent {
               flex: 1;
               display: flex;
               flex-direction: column;
               gap: 4px;
-              .appCenterCardContentTop {
+              .apiCenterCardContentTop {
                 display: flex;
                 justify-content: space-between;
-                .appCenterCardContentTitle {
+                .apiCenterCardContentTitle {
                   color: var(--o-text-color-primary);
                   font-size: 16px;
                   line-height: 24px;
                 }
-                .appCenterCardContentCollect {
+                .apiCenterCardContentCollect {
                   width: 24px;
                   height: 24px;
                   background-color: var(--o-bg-color-light);
@@ -106,28 +117,28 @@
                       fill: var(--o-text-color-tertiary);
                     }
                   }
-                  .appFavorite {
+                  .apiFavorite {
                     path {
                       fill: rgb(99, 149, 253);
                     }
                   }
                 }
               }
-              .appCenterCardContentDes {
+              .apiCenterCardContentDes {
                 font-size: 14px;
                 line-height: 22px;
               }
             }
           }
-          .appCenterCardBottom {
+          .apiCenterCardBottom {
             margin-top: 16px;
             display: flex;
             justify-content: space-between;
-            .appCenterCardUser {
+            .apiCenterCardUser {
               font-size: 12px;
               line-height: 16px;
             }
-            .appCenterCardOps {
+            .apiCenterCardOps {
               .el-button span {
                 color: #6395fd;
                 font-size: 12px;
@@ -135,12 +146,62 @@
             }
           }
         }
+        .apiCenterCardSingle:hover {
+          box-sizing: border-box;
+          border: 1px solid #7aa5ff;
+          background: linear-gradient(
+            127deg,
+            rgba(109, 117, 250, 0.07) 1.003%,
+            rgba(90, 179, 255, 0.07) 98.421%
+          ) !important;
+        }
+      }
+    }
+    ::-webkit-scrollbar {
+      width: 4px;
+      height: 8px;
+      background: transparent;
+    }
+    @media screen and (width <= 1400px) {
+      .apiCenterCardContainer {
+        width: 1000px;
+      }
+    }
+
+    .el-pagination {
+      margin-top: 16px;
+      .el-select__wrapier {
+        background-color: transparent;
       }
     }
   }
-  .appCenterBtnActive {
+  .apiCenterBtnActive {
     background-color: var(--o-color-primary) !important;
     border-color: var(--o-color-primary) !important;
     color: var(--o-color-white) !important;
   }
 }
+// 应用中心删除二次提示样式
+.el-message-box {
+  min-width: 400px;
+  padding: 0px !important;
+  border-radius: 8px;
+  .el-message-box__headerbtn {
+    width: 16px;
+    height: 16px;
+    right: 20px;
+  }
+  .el-message-box__status {
+    top: 0px;
+  }
+  .el-message-box__message {
+    padding-left: 4px;
+  }
+  .el-message-box__btns {
+    flex-direction: row;
+    .el-button {
+      width: 64px;
+      height: 24px;
+    }
+  }
+}
diff --git a/src/views/dialogue/components/DialogueAside.vue b/src/views/dialogue/components/DialogueAside.vue
index 5c50129feb58da4ec5b9024625c15e95e7070ed6..724e2e5f8610213da62e3fab6d0ac6959992ec5c 100644
--- a/src/views/dialogue/components/DialogueAside.vue
+++ b/src/views/dialogue/components/DialogueAside.vue
@@ -417,16 +417,14 @@ watch(
 
 .collapsible-apps {
   width: 17rem;
-  // background-color: rgb(244, 246, 250);
   border-radius: 8px;
   .collapsible-header {
-    background-color: rgb(244, 246, 250);
+    background-color: var(--o-think-header-bg);
     padding: 1rem;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    // margin-bottom: 12px;
     cursor: pointer;
     .header-content {
       display: flex;
@@ -440,7 +438,7 @@ watch(
       }
       span {
         font-weight: 600;
-        color: #374151;
+        color: var(--o-text-color-secondary);
       }
     }
 
diff --git a/src/views/dialogue/components/InitalPanel.vue b/src/views/dialogue/components/InitalPanel.vue
index 9a29d9924f325181029347738dd9894a910b98c9..f6ce140a84af2371fe6b672c3f210bf64c6426fc 100644
--- a/src/views/dialogue/components/InitalPanel.vue
+++ b/src/views/dialogue/components/InitalPanel.vue
@@ -25,7 +25,7 @@ const questions = [
   {
     groupId: 0,
     id: 3,
-    question: 'innovation_release_cycle_and_support',
+    question: 'open_euler_pkgship',
   },
   {
     groupId: 0,
@@ -283,13 +283,12 @@ onMounted(() => {
     li {
       cursor: text;
     }
-
     &-item {
       display: flex;
       align-items: center;
       width: calc(50% - 8px);
       height: 80px;
-      background: rgb(244, 246, 250);
+      background: var(--o-bg-color-base);
       margin-top: 8px;
       overflow: hidden;
       border-radius: 8px;