From 22dc69f919d2a361d247b7586f031204b58592ab Mon Sep 17 00:00:00 2001
From: hrx <18603305412@163.com>
Date: Sat, 23 May 2026 14:52:06 +0800
Subject: [PATCH] updata

---
 f/web-kboss/src/api/login.js                  |  12 +-
 f/web-kboss/src/api/model/model.js            |  41 ++
 .../login/components/ForgotPasswordDialog.vue | 316 +++++++++
 f/web-kboss/src/views/login/indexNew.vue      | 169 +----
 .../src/views/modelManagement/ApiDocument.vue | 177 +++--
 .../src/views/modelManagement/Experience.vue  | 662 +++++++++++++++++-
 .../src/views/modelManagement/ModelDetail.vue | 225 +++++-
 .../src/views/product/allProduct/index.vue    | 490 +++++++++++--
 .../src/views/tokenManagement/index.vue       |   2 +-
 9 files changed, 1775 insertions(+), 319 deletions(-)
 create mode 100644 f/web-kboss/src/views/login/components/ForgotPasswordDialog.vue

diff --git a/f/web-kboss/src/api/login.js b/f/web-kboss/src/api/login.js
index 5f275bb..726a76c 100644
--- a/f/web-kboss/src/api/login.js
+++ b/f/web-kboss/src/api/login.js
@@ -72,7 +72,7 @@ export function retrieveCodeAPI(data) {
 //重置密码
 export function getPasswordCodeAPI(params) {
   return request({
-    url: `/user/getretrieve${suffix}`,
+    url: `/customer/forgotPassword${suffix}`,
     method: 'get',
     params: params
   })
@@ -283,3 +283,13 @@ export function register(data) {
 
   })
 }
+
+
+// 新忘记密码
+export function newForgotPassword(data) {
+  return request({
+    url: `/customer/forgotPassword.dspy`,
+    method: 'post',
+    data,
+  })
+}
\ No newline at end of file
diff --git a/f/web-kboss/src/api/model/model.js b/f/web-kboss/src/api/model/model.js
index 3397ed4..ba45ad7 100644
--- a/f/web-kboss/src/api/model/model.js
+++ b/f/web-kboss/src/api/model/model.js
@@ -72,3 +72,44 @@ export const reqCreateApikey = (params = {}) => {
     params
   })
 }
+
+// 获取模型api文档
+export const reqModelApiDocument = (params = {}) => {
+  return request({
+    url: '/cntoai/get_model_api_doc.dspy',
+    method: 'get',
+    params
+  })
+}
+//模型体验多轮会话
+export const reqModelExperienceMultiRound = (params = {}) => {
+  return request({
+    url: '/cntoai/chat_send_stream.dspy',
+    method: 'get',
+    params
+  })
+}
+// 左侧历史对话
+export const reqModelExperienceLeftHistory = (params = {}) => {
+  return request({
+    url: '/cntoai/chat_session_list.dspy',
+    method: 'get',
+    params
+  })
+}
+// 历史对话信息
+export const reqModelExperienceHistoryInfo = (params = {}) => {
+  return request({
+    url: '/cntoai/chat_session_messages.dspy',
+    method: 'get',
+    params
+  })
+}
+// 删除历史对话
+export const reqModelExperienceDeleteHistory = (params = {}) => {
+  return request({
+    url: '/cntoai/chat_session_delete.dspy',
+    method: 'get',
+    params
+  })
+}
\ No newline at end of file
diff --git a/f/web-kboss/src/views/login/components/ForgotPasswordDialog.vue b/f/web-kboss/src/views/login/components/ForgotPasswordDialog.vue
new file mode 100644
index 0000000..db41b0e
--- /dev/null
+++ b/f/web-kboss/src/views/login/components/ForgotPasswordDialog.vue
@@ -0,0 +1,316 @@
+<template>
+  <el-dialog
+    custom-class="forgot-password-dialog"
+    :visible="visible"
+    width="420px"
+    :close-on-click-modal="false"
+    destroy-on-close
+    append-to-body
+    @open="handleOpen"
+    @close="handleClose"
+  >
+    <div slot="title" class="forgot-dialog-title">
+      <div class="title-icon">
+        <i class="el-icon-lock"></i>
+      </div>
+      <div>
+        <h3>重置密码</h3>
+        <p>通过手机号验证码验证身份后设置新密码</p>
+      </div>
+    </div>
+
+    <el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="forgot-form" autocomplete="off">
+      <el-form-item label="手机号" prop="username">
+        <el-input v-model="form.username" clearable autocomplete="off" placeholder="请输入绑定手机号"></el-input>
+      </el-form-item>
+
+      <el-form-item label="新密码" prop="password">
+        <el-input v-model="form.password" clearable show-password autocomplete="new-password" placeholder="请输入新密码"></el-input>
+      </el-form-item>
+
+      <el-form-item label="验证码" prop="vcode">
+        <div class="code-row">
+          <el-input v-model="form.vcode" clearable autocomplete="off" placeholder="请输入验证码"></el-input>
+          <el-button
+            class="code-btn"
+            :disabled="isDisabled || isGettingCode"
+            :loading="isGettingCode"
+            @click="debouncedGetCode"
+          >
+            {{ sendCodeText }}
+          </el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <div slot="footer" class="forgot-footer">
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" :loading="submitting" @click="handleSubmit">确认重置</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getPasswordCodeAPI, retrieveCodeAPI } from '@/api/login'
+
+export default {
+  name: 'ForgotPasswordDialog',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      form: this.createEmptyForm(),
+      rules: {
+        username: [
+          { required: true, message: '请输入手机号', trigger: 'blur' },
+          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
+        ],
+        password: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
+        vcode: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
+      },
+      sendCodeText: '获取验证码',
+      isDisabled: false,
+      isGettingCode: false,
+      submitting: false,
+      timeCount: 60,
+      timer: null,
+      debounceTimer: null
+    }
+  },
+  beforeDestroy() {
+    this.resetCodeState()
+    clearTimeout(this.debounceTimer)
+  },
+  methods: {
+    handleOpen() {
+      this.resetForm()
+      this.$nextTick(() => {
+        this.$refs.formRef && this.$refs.formRef.clearValidate()
+      })
+    },
+    handleClose() {
+      this.$emit('update:visible', false)
+      this.resetForm()
+    },
+    resetForm() {
+      this.form = this.createEmptyForm()
+      this.submitting = false
+      this.resetCodeState()
+    },
+    createEmptyForm() {
+      return {
+        username: '',
+        password: '',
+        vcode: '',
+        codeid: ''
+      }
+    },
+    debouncedGetCode() {
+      if (this.isDisabled || this.isGettingCode) return
+
+      this.isGettingCode = true
+      clearTimeout(this.debounceTimer)
+      this.debounceTimer = setTimeout(() => {
+        this.getCode()
+      }, 300)
+    },
+    async getCode() {
+      if (!this.form.username || !/^1[3-9]\d{9}$/.test(this.form.username)) {
+        this.isGettingCode = false
+        this.$message.error('请输入正确的手机号')
+        return
+      }
+
+      try {
+        const res = await retrieveCodeAPI({
+          mobile: this.form.username,
+          action_type: 'forgotpassword'
+        })
+
+        if (res.status === true) {
+          this.form.codeid = res.codeid
+          this.startCountdown()
+          this.$message.success('验证码已发送，请注意查收。')
+          return
+        }
+
+        this.$message.error(res.msg || '验证码获取失败')
+      } catch (error) {
+        this.$message.error('验证码获取失败')
+      } finally {
+        this.isGettingCode = false
+      }
+    },
+    startCountdown() {
+      this.timeCount = 59
+      this.isDisabled = true
+      this.sendCodeText = `重新发送${this.timeCount}s`
+
+      clearInterval(this.timer)
+      this.timer = setInterval(() => {
+        if (this.timeCount > 0) {
+          this.timeCount--
+          this.sendCodeText = `重新发送${this.timeCount}s`
+          return
+        }
+        this.resetCodeState()
+      }, 1000)
+    },
+    resetCodeState() {
+      this.sendCodeText = '获取验证码'
+      clearInterval(this.timer)
+      this.timer = null
+      this.isDisabled = false
+      this.timeCount = 60
+    },
+    handleSubmit() {
+      this.$refs.formRef.validate(async valid => {
+        if (!valid) return
+        if (!this.form.codeid) {
+          this.$message.error('请先获取验证码')
+          return
+        }
+
+        this.submitting = true
+        try {
+          const res = await getPasswordCodeAPI({
+            mobile: this.form.username,
+            password: this.form.password,
+            codeid: this.form.codeid,
+            vcode: this.form.vcode,
+            action_type: 'forgotpassword'
+          })
+
+          if (res.status === true) {
+            this.$message.success('密码重置成功')
+            this.handleClose()
+            return
+          }
+
+          this.$message.error(res.msg || '密码重置失败')
+        } catch (error) {
+          this.$message.error('密码重置失败')
+        } finally {
+          this.submitting = false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.forgot-password-dialog {
+  border-radius: 16px;
+  overflow: hidden;
+
+  .el-dialog__header {
+    padding: 24px 28px 18px;
+    background: linear-gradient(135deg, #f4f8ff 0%, #ffffff 70%);
+    border-bottom: 1px solid #eef2f7;
+  }
+
+  .el-dialog__body {
+    padding: 24px 28px 8px;
+  }
+
+  .el-dialog__footer {
+    padding: 14px 28px 24px;
+  }
+
+  .el-dialog__headerbtn {
+    top: 24px;
+    right: 24px;
+  }
+}
+
+.forgot-dialog-title {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+
+  .title-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    color: #2f6bff;
+    font-size: 20px;
+    background: #eaf1ff;
+    border-radius: 12px;
+  }
+
+  h3 {
+    margin: 0;
+    color: #1f2d3d;
+    font-size: 20px;
+    font-weight: 600;
+  }
+
+  p {
+    margin: 6px 0 0;
+    color: #8a94a6;
+    font-size: 13px;
+  }
+}
+
+.forgot-form {
+  .el-form-item {
+    margin-bottom: 18px;
+  }
+
+  .el-form-item__label {
+    padding-bottom: 8px;
+    color: #344054;
+    font-weight: 500;
+    line-height: 1;
+  }
+
+  .el-input__inner {
+    height: 42px;
+    border-color: #dfe5ef;
+    border-radius: 8px;
+  }
+}
+
+.code-row {
+  display: flex;
+  gap: 10px;
+
+  .el-input {
+    flex: 1;
+  }
+
+  .code-btn {
+    width: 118px;
+    height: 42px;
+    color: #2f6bff;
+    background: #eef4ff;
+    border-color: #cfe0ff;
+    border-radius: 8px;
+
+    &:hover,
+    &:focus {
+      color: #ffffff;
+      background: #2f6bff;
+      border-color: #2f6bff;
+    }
+  }
+}
+
+.forgot-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+
+  .el-button {
+    min-width: 90px;
+    border-radius: 8px;
+  }
+}
+</style>
diff --git a/f/web-kboss/src/views/login/indexNew.vue b/f/web-kboss/src/views/login/indexNew.vue
index 18ec0b2..0dad6ee 100644
--- a/f/web-kboss/src/views/login/indexNew.vue
+++ b/f/web-kboss/src/views/login/indexNew.vue
@@ -110,7 +110,7 @@
                 </div>
 
                 <div class="two-btn">
-                  <i></i>
+                  <span class="forgot-password" @click="forgotPasswordVisible = true">忘记密码？</span>
                   <span :loading="loading" type="primary" class="go-register"
                     style="width: 127px; margin-bottom: 30px; margin-left: 0px" @click.native.prevent="handleRegister"
                     @click="handleRegister">
@@ -119,37 +119,7 @@
                 </div>
               </el-form>
 
-              <!-- 重置密码对话框暂时注释 -->
-              <!--
-              <el-dialog title="重置密码" :visible.sync="dialogVisible" width="25%" class="myDialog">
-                <el-form ref="form" :model="form" label-width="100px" :rules="forms">
-                  <el-form-item label="用户名:" prop="username" class="rePassword" style="background-color: white">
-                    <el-input v-model="form.username" class="name-input" placeholder="请先输入用户名/手机号"
-                      style="background-color: white;border:1px solid #d9d9d9;border-radius: 3px;">
-                    </el-input>
-                  </el-form-item>
-                  <el-form-item label="密码:" prop="password" style="background-color: white">
-                    <el-input v-model="form.password" style="border:1px solid #d9d9d9;border-radius: 3px"
-                      placeholder="请输入新密码">
-                    </el-input>
-                  </el-form-item>
-                  <el-form-item label="验证码:" prop="vcode" style="background-color: white">
-                    <div style="display: flex; flex-direction: row">
-                      <el-input style="border:1px solid #d9d9d9;border-radius: 3px" ref="vcode" v-model="form.vcode"
-                        placeholder="请输入验证码" name="vcode" type="text" />
-                      <el-button type="primary" size="mini" style="height: 40px; margin-left: 10px"
-                        :disabled="isDisabled1 || isGettingCode1" @click="debouncedGetCode1">
-                        {{ SendCode_text1 }}
-                      </el-button>
-                    </div>
-                  </el-form-item>
-                  <div class="dialog-footer">
-                    <el-button size="small" @click="cancelReset">取 消</el-button>
-                    <el-button type="primary" size="small" @click="handleSubmit">确 定</el-button>
-                  </div>
-                </el-form>
-              </el-dialog>
-              -->
+              <ForgotPasswordDialog :visible.sync="forgotPasswordVisible" />
             </div>
           </div>
         </div>
@@ -177,12 +147,10 @@
 import {
   getCodeAPI,      // 获取验证码API
   getLogoAPI,      // 获取Logo信息API
-  // getPasswordCodeAPI, // 重置密码API
   logintypeAPI,    // 登录类型API
   loginUserAPI,    // 用户登录API
   reqGetAppidAPI,  // 获取微信AppID API
   reqGetCodeAPI,   // 获取微信授权码API
-  // retrieveCodeAPI, // 获取重置密码验证码API,
 } from "@/api/login";
 
 import store from "@/store";
@@ -196,10 +164,11 @@ import { Message } from "element-ui";
 import router, { resetRouter } from "@/router";
 import { reqNewHomeFestival } from "@/api/newHome";
 import { getHomePath } from '@/views/setting/tools'
+import ForgotPasswordDialog from './components/ForgotPasswordDialog.vue'
 
 export default {
   name: "indexNew",
-  components: { BeforeLogin, promotionalInvitationCode },
+  components: { BeforeLogin, promotionalInvitationCode, ForgotPasswordDialog },
   data() {
     return {
       // 微信登录相关
@@ -231,6 +200,7 @@ export default {
 
       // 对话框和加载状态
       loading: false,       // 登录按钮加载状态
+      forgotPasswordVisible: false, // 忘记密码弹窗显示状态
 
       // 登录表单数据
       loginForm: {
@@ -258,21 +228,6 @@ export default {
       capsTooltip: false,
       passwordType: "password", // 密码输入框类型：password或text
 
-      // 重置密码相关暂时注释
-      // form: {
-      //   username: "", // 用户名
-      //   vcode: "",    // 验证码
-      //   password: "", // 新密码
-      //   id: "",       // 用户ID
-      //   codeid: "",   // 验证码ID
-      // },
-
-      // forms: {
-      //   username: [{ required: true, message: "请输入姓名", trigger: "blur" }],
-      //   password: [{ required: true, message: "请输入密码", trigger: "blur" }],
-      //   vcode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
-      // },
-
       // Logo显示控制
       isLogo: false,
       isShowSaleProduct: false, // 是否显示销售产品
@@ -374,20 +329,6 @@ export default {
       }, 300);
     },
 
-    // 重置密码相关方法暂时注释
-    // debouncedGetCode1: function () {
-    //   if (this.isDisabled1 || this.isGettingCode1) return;
-    //
-    //   this.isGettingCode1 = true;
-    //
-    //   clearTimeout(this.debounceTimer1);
-    //
-    //   this.debounceTimer1 = setTimeout(() => {
-    //     this.getCode1();
-    //     this.isGettingCode1 = false;
-    //   }, 300);
-    // },
-
     // 跳转到百度产品页面
     goBaidu(listUrl, url) {
       this.$store.commit('setRedirectUrl', url)
@@ -747,54 +688,6 @@ export default {
       });
     },
 
-    // getCode1() {
-    //   if (!this.form.username || !/^1[3-9]\d{9}$/.test(this.form.username)) {
-    //     this.$message.error('请输入正确的手机号');
-    //     return;
-    //   }
-    //
-    //   retrieveCodeAPI({
-    //     mobile: this.form.username,
-    //     action_type: 'login'
-    //   }).then((res) => {
-    //     if (res.status == true) {
-    //       this.form.id = res.userid;
-    //       this.form.codeid = res.codeid;
-    //       let that = this;
-    //       this.time_count1 = 59;
-    //       this.isDisabled1 = true;
-    //       this.SendCode_text1 = "重新发送" + this.time_count1 + "s";
-    //
-    //       if (!that.timer1) {
-    //         that.timer1 = setInterval(() => {
-    //           if (that.time_count1 > 0) {
-    //             that.time_count1--;
-    //             that.SendCode_text1 = "重新发送" + that.time_count1 + "s";
-    //           } else {
-    //             that.SendCode_text1 = "获取验证码";
-    //             clearInterval(that.timer1);
-    //             that.timer1 = null;
-    //             this.isDisabled1 = false;
-    //             that.time_count1 = 60;
-    //           }
-    //         }, 1000);
-    //       }
-    //       this.$message({
-    //         message: "验证码已发送，请注意查收。",
-    //         type: "success",
-    //       });
-    //     } else {
-    //       this.$message({
-    //         message: res.msg,
-    //         type: "error",
-    //       });
-    //     }
-    //   }).catch(error => {
-    //     this.isGettingCode1 = false;
-    //     this.$message.error('验证码获取失败');
-    //   });
-    // },
-
     // 标签页点击事件
     handleClick(tab, event) {
       console.log(tab, event);
@@ -932,50 +825,12 @@ export default {
       });
     },
 
-    // resetPassword() {
-    //   this.dialogVisible = true;
-    //   this.$refs.loginForm.resetFields();
-    // },
-
     // 跳转到注册页面
     handleRegister() {
       console.log("注册按钮被点击了")
       this.$router.push({ name: "registrationPage" });
     },
 
-    // cancelReset() {
-    //   this.dialogVisible = false;
-    //   this.$refs.form.resetFields();
-    // },
-
-    // handleSubmit() {
-    //   let parmas = {
-    //     id: this.form.id,
-    //     password: this.form.password,
-    //     codeid: this.form.codeid,
-    //     vcode: this.form.vcode,
-    //   };
-    //   getPasswordCodeAPI(parmas).then((res) => {
-    //     if (res.status == true) {
-    //       this.$message({
-    //         message: "密码重置成功",
-    //         type: "success",
-    //       });
-    //       this.isDisabled1 = false;
-    //       this.dialogVisible = false;
-    //       this.SendCode_text1 = "获取验证码";
-    //       clearInterval(this.timer1);
-    //       this.timer1 = null;
-    //       this.time_count1 = 60;
-    //       this.$refs.form.resetFields();
-    //     } else {
-    //       this.$message({
-    //         message: res.msg,
-    //         type: "error",
-    //       });
-    //     }
-    //   });
-    // },
   }
 }
 </script>
@@ -1163,10 +1018,22 @@ $dark_gray: #889aa4;
 .two-btn {
   width: 300px;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
+  align-items: center;
   margin-top: 0;
 }
 
+.forgot-password {
+  margin-bottom: 30px;
+  color: #409eff;
+  cursor: pointer;
+  font-size: 14px;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
 .go-register {
   font-size: 14px;
   color: #333;
diff --git a/f/web-kboss/src/views/modelManagement/ApiDocument.vue b/f/web-kboss/src/views/modelManagement/ApiDocument.vue
index 62bba37..85a394e 100644
--- a/f/web-kboss/src/views/modelManagement/ApiDocument.vue
+++ b/f/web-kboss/src/views/modelManagement/ApiDocument.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="api-doc-page">
     <header class="doc-nav">
-      <button type="button" @click="$router.back()">
+      <button type="button" @click="goBack">
         <i class="el-icon-arrow-left"></i>
         返回
       </button>
@@ -9,57 +9,45 @@
     </header>
 
     <main class="doc-container">
+      <el-alert
+        v-if="errorMessage"
+        class="doc-alert"
+        :title="errorMessage"
+        type="warning"
+        show-icon
+        :closable="false"
+      ></el-alert>
+
       <section class="doc-hero">
-        <h1>MiniMax-M2.5 API 文档</h1>
-        <p>通过 OpenAI 兼容接口接入模型能力，支持对话生成、工具调用和流式输出。</p>
-        <div class="quick-tabs">
+        <h1>{{ apiDoc.model_name }} API 文档</h1>
+        <p>{{ heroDescription }}</p>
+        <!-- <div class="quick-tabs">
           <span v-for="item in quickTabs" :key="item">{{ item }}</span>
-        </div>
+        </div> -->
       </section>
 
-      <section class="doc-section">
+      <section v-loading="loading" class="doc-section">
         <h2>1. 接口地址</h2>
         <p>统一使用 HTTPS 请求，所有接口都需要携带平台签发的 API Key。</p>
-        <pre><code>POST https://api.kboss.example.com/v2/chat/completions</code></pre>
+        <pre><code>{{ apiUrlText }}</code></pre>
+      </section>
+
+
+
+  
+
+      <section class="doc-section">
+        <h2>2. 请求示例</h2>
+        <pre><code>{{ apiDoc.curl_code || requestExample }}</code></pre>
       </section>
 
       <section class="doc-section">
-        <h2>2. 模型能力列表</h2>
-        <el-table :data="capabilityTable" border size="small">
-          <el-table-column prop="name" label="能力"></el-table-column>
-          <el-table-column prop="value" label="说明"></el-table-column>
-          <el-table-column prop="status" label="状态" width="100">
-            <template slot-scope="scope">
-              <el-tag :type="scope.row.status === '支持' ? 'success' : 'info'" size="mini">
-                {{ scope.row.status }}
-              </el-tag>
-            </template>
-          </el-table-column>
-        </el-table>
+        <h2>3. Python 示例</h2>
+        <pre><code>{{ apiDoc.python_code || pythonExample }}</code></pre>
       </section>
 
       <section class="doc-section">
-        <h2>3. 请求参数</h2>
-        <el-table :data="requestParams" border size="small">
-          <el-table-column prop="name" label="参数名" width="160"></el-table-column>
-          <el-table-column prop="type" label="类型" width="120"></el-table-column>
-          <el-table-column prop="required" label="必填" width="90"></el-table-column>
-          <el-table-column prop="desc" label="说明"></el-table-column>
-        </el-table>
-      </section>
-
-      <section class="doc-section">
-        <h2>4. 请求示例</h2>
-        <pre><code>{{ requestExample }}</code></pre>
-      </section>
-
-      <section class="doc-section">
-        <h2>5. 返回示例</h2>
-        <pre><code>{{ responseExample }}</code></pre>
-      </section>
-
-      <section class="doc-section">
-        <h2>6. 错误码</h2>
+        <h2>4. 错误码</h2>
         <el-table :data="errorCodes" border size="small">
           <el-table-column prop="code" label="错误码" width="140"></el-table-column>
           <el-table-column prop="message" label="说明"></el-table-column>
@@ -73,10 +61,22 @@
 </template>
 
 <script>
+import { reqModelApiDocument } from '@/api/model/model'
+
 export default {
   name: 'ApiDocument',
   data() {
     return {
+      loading: false,
+      errorMessage: '',
+      apiDoc: {
+        id: '',
+        api_url: '',
+        model_id: '',
+        curl_code: '',
+        python_code: '',
+        model_name: '模型'
+      },
       quickTabs: ['API概览', '认证方式', '请求参数', '代码示例', '错误码'],
       capabilityTable: [
         { name: '文本对话', value: '支持单轮和多轮对话生成', status: '支持' },
@@ -111,26 +111,81 @@ export default {
     "temperature": 0.7,
     "stream": false
   }'`,
-      responseExample: `{
-  "id": "chatcmpl_20260518",
-  "object": "chat.completion",
-  "model": "minimax-m2.5",
-  "choices": [
-    {
-      "index": 0,
-      "message": {
-        "role": "assistant",
-        "content": "这是一款适合企业知识问答和内容生成的通用模型..."
-      },
-      "finish_reason": "stop"
+      pythonExample: `import requests
+
+url = "https://api.kboss.example.com/v2/chat/completions"
+headers = {
+    "Content-Type": "application/json",
+    "Authorization": "Bearer $KBOSS_API_KEY"
+}
+data = {
+    "model": "minimax-m2.5",
+    "messages": [{"role": "user", "content": "Hello!"}],
+    "stream": False
+}
+response = requests.post(url, headers=headers, json=data)
+print(response.json())`
     }
-  ],
-  "usage": {
-    "prompt_tokens": 24,
-    "completion_tokens": 68,
-    "total_tokens": 92
-  }
-}`
+  },
+  computed: {
+    apiUrlText() {
+      const curlUrl = this.getUrlFromCurl(this.apiDoc.curl_code)
+      const url = this.apiDoc.api_url || curlUrl
+      return url ? `POST ${url}` : '接口地址以后端返回为准'
+    },
+    heroDescription() {
+      const modelName = this.apiDoc.model_name || '当前模型'
+      return `${modelName} 接口调用示例，包含 curl 与 Python 两种接入方式。`
+    }
+  },
+  created() {
+    this.fetchApiDocument()
+  },
+  watch: {
+    '$route.query.id'() {
+      this.fetchApiDocument()
+    }
+  },
+  methods: {
+    // 通过路由传入的 id 获取模型 API 文档数据。
+    async fetchApiDocument() {
+      const id = this.$route.query.id || this.$route.query.model_id
+      if (!id) {
+        this.errorMessage = '缺少模型ID，无法获取 API 文档'
+        return
+      }
+
+      this.loading = true
+      this.errorMessage = ''
+      try {
+        const res = await reqModelApiDocument({ id })
+        if (res && res.status && res.data) {
+          this.apiDoc = {
+            ...this.apiDoc,
+            ...res.data,
+            model_name: res.data.model_name || this.apiDoc.model_name
+          }
+          return
+        }
+        this.errorMessage = (res && res.msg) || 'API 文档数据获取失败'
+      } catch (error) {
+        console.error('[API文档] 获取模型 API 文档失败', error)
+        this.errorMessage = 'API 文档数据获取失败，请稍后重试'
+      } finally {
+        this.loading = false
+      }
+    },
+    getUrlFromCurl(curlCode) {
+      if (!curlCode) return ''
+      const match = String(curlCode).match(/https?:\/\/[^\s\\]+/)
+      return match ? match[0] : ''
+    },
+    goBack() {
+      if (this.$route.query.from === 'tokenMarket') {
+        this.$router.push({ path: '/product', query: { category: 'TOKEN市集' } })
+        return
+      }
+      this.$router.back()
     }
   }
 }
@@ -169,6 +224,10 @@ export default {
   margin: 28px auto 0;
 }
 
+.doc-alert {
+  margin-bottom: 18px;
+}
+
 .doc-hero,
 .doc-section {
   padding: 24px;
diff --git a/f/web-kboss/src/views/modelManagement/Experience.vue b/f/web-kboss/src/views/modelManagement/Experience.vue
index c21828f..672c519 100644
--- a/f/web-kboss/src/views/modelManagement/Experience.vue
+++ b/f/web-kboss/src/views/modelManagement/Experience.vue
@@ -21,23 +21,25 @@
       <div class="history-panel">
         <div class="panel-title">最近对话</div>
         <div
-          v-for="item in historyList"
+          v-for="item in sidebarHistoryList"
           :key="item.id"
           class="history-item"
-          :class="{ active: activeHistoryId === item.id }"
-          @click="activeHistoryId = item.id"
+          :class="{ active: isActiveHistory(item), 'is-temporary': item.isTemporary }"
+          @click="loadHistoryMessages(item)"
         >
           <i class="el-icon-chat-dot-round"></i>
           <span>{{ item.title }}</span>
+          <i v-if="!item.isTemporary" class="el-icon-delete delete-history" @click.stop="deleteHistory(item)"></i>
         </div>
+        <div v-if="sidebarHistoryList.length === 0" class="history-empty">暂无历史对话</div>
       </div>
     </aside>
 
     <main class="chat-main">
       <header class="chat-header">
         <div>
-          <h2>K-Boss AI 模型助手</h2>
-          <p>选择模型后可在这里进行问答、推理、方案生成和能力验证。</p>
+          <h2>AI 模型助手</h2>
+          <p>在这里进行问答、推理、方案生成和能力验证。</p>
         </div>
      
       </header>
@@ -71,17 +73,22 @@
           </div>
           <div class="message-bubble">
             <div class="message-name">{{ message.role === 'assistant' ? '模型助手' : '我' }}</div>
-            <div class="message-text">{{ message.content }}</div>
+            <div v-if="message.loading" class="message-text typing-text">
+              模型正在思考<span class="loading-dots"></span>
+            </div>
+            <div v-else class="message-text">
+              {{ message.content }}<span v-if="message.streaming" class="stream-cursor"></span>
+            </div>
           </div>
         </div>
       </section>
 
       <footer class="chat-input-area">
-        <div class="billing-tip">
+        <!-- <div class="billing-tip">
           <i class="el-icon-info"></i>
           <span>体验模型将会消耗 Tokens，费用以实际发生为主</span>
           <button type="button">计费说明</button>
-        </div>
+        </div> -->
         <div class="input-shell">
           <el-input
             v-model="inputValue"
@@ -96,7 +103,8 @@
             <el-button
               type="primary"
               icon="el-icon-position"
-              :disabled="!inputValue.trim()"
+              :disabled="!inputValue.trim() || sending"
+              :loading="sending"
               @click="sendMessage"
             >
               发送
@@ -110,6 +118,12 @@
 
 <script>
 import { mapState } from 'vuex'
+import {
+  reqModelExperienceDeleteHistory,
+  reqModelExperienceHistoryInfo,
+  reqModelExperienceLeftHistory
+} from '@/api/model/model'
+import request from '@/utils/request'
 
 export default {
   name: 'ModelExperience',
@@ -117,14 +131,16 @@ export default {
     return {
   
       inputValue: '',
-      activeHistoryId: 1,
+      activeHistoryId: 'new-chat',
+      currentSessionId: '',
+      temporaryChatId: 'new-chat',
+      sending: false,
+      streamController: null,
+      streamFlushTimer: null,
+      streamBufferMap: {},
       messages: [],
     
-      historyList: [
-        { id: 1, title: '模型能力咨询' },
-        { id: 2, title: '产品介绍生成' },
-        { id: 3, title: '部署方案建议' }
-      ],
+      historyList: [],
       promptList: [
         '帮我介绍一下这个模型适合哪些业务场景',
         '生成一段模型上架介绍文案',
@@ -139,43 +155,537 @@ export default {
     }),
     siteLogo() {
       return this.logoInfoNew?.home?.logoImg || require('@/assets/kyy/LOGO.png')
+    },
+    userId() {
+      const userInfo = this.getStoredJson('user_info')
+      return sessionStorage.getItem('userid') ||
+        sessionStorage.getItem('userId') ||
+        localStorage.getItem('userid') ||
+        localStorage.getItem('userId') ||
+        userInfo?.id ||
+        userInfo?.userid ||
+        ''
+    },
+    modelIdentifier() {
+      const cachedModel = this.getStoredJson('tokenMarketSelectedModel')
+      return this.$route.query.llmid ||
+        cachedModel?.llmid ||
+        this.$route.query.model_id ||
+        this.$route.query.id ||
+        cachedModel?.id ||
+        ''
+    },
+    sidebarHistoryList() {
+      const currentItem = this.getCurrentChatItem()
+      if (!currentItem) return this.historyList
+
+      const exists = this.historyList.some(item => item.id === currentItem.id)
+      if (exists) return this.historyList
+      return [currentItem, ...this.historyList]
     }
   },
+  created() {
+    this.fetchHistoryList()
+  },
+  beforeDestroy() {
+    this.abortStreamRequest()
+    this.clearStreamFlushTimer()
+  },
   methods: {
+    // 返回上一页；从 TOKEN 市集进入时固定回到 TOKEN 市集分类。
     goBack() {
+      if (this.$route.query.from === 'tokenMarket') {
+        this.$router.push({ path: '/product', query: { category: 'TOKEN市集' } })
+        return
+      }
       this.$router.back()
     },
+
+    // 开启一个全新的临时会话，清空当前消息和 session_id。
     startNewChat() {
+      this.abortStreamRequest()
+      this.clearStreamFlushTimer()
+      this.streamBufferMap = {}
       this.messages = []
       this.inputValue = ''
+      this.currentSessionId = ''
+      this.activeHistoryId = this.temporaryChatId
+      this.sending = false
     },
+
+    // 点击欢迎页示例问题后，将示例文案放入输入框并立即发送。
     usePrompt(prompt) {
       this.inputValue = prompt
       this.sendMessage()
     },
-    sendMessage() {
+
+    // 发送用户消息；第一轮不传 session_id，拿到返回后保存，后续轮次自动携带。
+    async sendMessage() {
       const content = this.inputValue.trim()
-      if (!content) return
+      if (!content || this.sending) return
+      if (!this.userId) {
+        this.$message.error('缺少用户ID，无法发送消息')
+        return
+      }
 
       this.messages.push({
-        id: Date.now(),
+        id: this.createMessageId(),
         role: 'user',
         content
       })
 
       this.inputValue = ''
-      this.mockAssistantReply(content)
-    },
-    mockAssistantReply(question) {
-      setTimeout(() => {
-        this.messages.push({
-          id: Date.now() + 1,
-          role: 'assistant',
-          content: `已收到你的问题：“${question}”。这里后续可以接入真实模型接口，目前先展示模型对话页面效果。`
-        })
+      this.sending = true
+      const loadingId = this.createMessageId()
+      this.messages.push({
+        id: loadingId,
+        role: 'assistant',
+        content: '',
+        loading: true
+      })
+      this.$nextTick(this.scrollToBottom)
+
+      try {
+        const params = {
+
+          message: content,
+          userid: this.userId
+        }
+        if (this.currentSessionId) {
+          params.session_id = String(this.currentSessionId)
+        }
+
+        await this.sendStreamMessage(params, loadingId)
+        this.fetchHistoryList()
+      } catch (error) {
+        if (error.name !== 'AbortError') {
+          this.replaceLoadingMessage(loadingId, '请求失败，请稍后重试')
+        }
+      } finally {
+        this.sending = false
         this.$nextTick(this.scrollToBottom)
-      }, 300)
+      }
     },
+
+    // 拉取左侧历史会话列表。
+    async fetchHistoryList() {
+      if (!this.userId) return
+
+      try {
+        const res = await reqModelExperienceLeftHistory({ userid: this.userId })
+        this.historyList = this.normalizeHistoryList(this.extractResponseData(res))
+      } catch (error) {
+        this.historyList = []
+      }
+    },
+
+    // 点击历史会话时，加载该 session_id 对应的历史消息。
+    async loadHistoryMessages(item) {
+      if (item && item.isTemporary) {
+        this.activeHistoryId = item.id
+        return
+      }
+      if (!item || !item.id || item.id === this.activeHistoryId) return
+
+      this.activeHistoryId = item.id
+      this.currentSessionId = item.id
+      try {
+        const res = await reqModelExperienceHistoryInfo({
+          userid: this.userId,
+          session_id: item.id
+        })
+        this.messages = this.normalizeMessageList(this.extractResponseData(res))
+        this.$nextTick(this.scrollToBottom)
+      } catch (error) {
+        this.$message.error('历史对话加载失败')
+      }
+    },
+
+    // 删除左侧历史会话；临时“新对话”不允许删除。
+    async deleteHistory(item) {
+      if (!item || !item.id || item.isTemporary) return
+
+      try {
+        const res = await reqModelExperienceDeleteHistory({
+          userid: this.userId,
+          session_id: item.id
+        })
+
+        if (res.status === false) {
+          this.$message.error(res.msg || '删除失败')
+          return
+        }
+
+        if (this.currentSessionId === item.id) {
+          this.startNewChat()
+        }
+        this.$message.success('删除成功')
+        this.fetchHistoryList()
+      } catch (error) {
+        this.$message.error('删除失败')
+      }
+    },
+
+    // 生成当前会话在左侧栏中的临时展示项，类似 DeepSeek 的“新对话”。
+    getCurrentChatItem() {
+      if (!this.currentSessionId && this.activeHistoryId !== this.temporaryChatId && this.messages.length === 0) {
+        return null
+      }
+
+      return {
+        id: this.currentSessionId || this.temporaryChatId,
+        title: '新对话',
+        isTemporary: true
+      }
+    },
+
+    // 判断左侧会话项是否为当前激活会话。
+    isActiveHistory(item) {
+      if (!item) return false
+      if (item.isTemporary && this.currentSessionId) {
+        return item.id === this.currentSessionId
+      }
+      return this.activeHistoryId === item.id
+    },
+
+    // 将“思考中”的占位消息替换为最终文本，常用于异常或非流式兜底。
+    replaceLoadingMessage(id, content) {
+      const index = this.messages.findIndex(item => item.id === id)
+      if (index === -1) return
+      this.clearStreamBuffer(id)
+      this.$set(this.messages, index, {
+        ...this.messages[index],
+        loading: false,
+        streaming: false,
+        content: this.displayValue(content)
+      })
+    },
+
+    // 调用后端 SSE 流接口；收到 content 事件时实时追加到助手气泡。
+    async sendStreamMessage(params, messageId) {
+      this.prepareStreamMessage(messageId)
+      this.abortStreamRequest()
+      this.streamController = new AbortController()
+
+      const response = await fetch(this.buildStreamUrl(params), {
+        method: 'GET',
+        credentials: 'include',
+        headers: {
+          client_uuid: sessionStorage.getItem('client_uuid') || ''
+        },
+        signal: this.streamController.signal
+      })
+
+      if (!response.ok) {
+        throw new Error(`stream request failed: ${response.status}`)
+      }
+
+      if (!response.body) {
+        const text = await response.text()
+        this.consumeSseText(text, messageId)
+        this.finishStreamMessage(messageId)
+        return
+      }
+
+      const reader = response.body.getReader()
+      const decoder = new TextDecoder('utf-8')
+      let buffer = ''
+
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+
+        buffer += decoder.decode(value, { stream: true })
+        buffer = this.consumeSseText(buffer, messageId, true)
+      }
+
+      if (buffer) {
+        this.consumeSseText(buffer, messageId)
+      }
+      this.finishStreamMessage(messageId)
+    },
+
+    // 初始化助手占位气泡；首个 content 到达前保持 loading，避免空白气泡。
+    prepareStreamMessage(id) {
+      const index = this.messages.findIndex(item => item.id === id)
+      if (index === -1) return
+      this.$set(this.messages, index, {
+        ...this.messages[index],
+        loading: true,
+        streaming: false,
+        content: ''
+      })
+    },
+
+    // 拼接 SSE 请求地址，沿用全局 request 的 baseURL。
+    buildStreamUrl(params) {
+      const baseURL = request.defaults.baseURL || ''
+      const query = new URLSearchParams()
+      Object.keys(params).forEach(key => {
+        if (params[key] !== undefined && params[key] !== null && params[key] !== '') {
+          query.append(key, params[key])
+        }
+      })
+      return `${baseURL}/cntoai/chat_send_stream.dspy?${query.toString()}`
+    },
+
+    // 解析后端返回的 data: {...} SSE 文本；不完整片段会留到下一次继续解析。
+    consumeSseText(text, messageId, keepRemain = false) {
+      const normalizedText = text.replace(/\r\n/g, '\n')
+      const blocks = normalizedText.split('\n\n')
+      const pending = keepRemain ? blocks.pop() : ''
+
+      blocks.forEach(block => {
+        const lines = block.split('\n').filter(line => line.startsWith('data:'))
+        lines.forEach(line => {
+          const payload = line.replace(/^data:\s*/, '').trim()
+          this.handleSsePayload(payload, messageId)
+        })
+      })
+
+      return pending || ''
+    },
+
+    // 处理单条 SSE data 负载：content 追加文本，meta/done 保存 session_id。
+    handleSsePayload(payload, messageId) {
+      if (!payload || payload === '[DONE]') return
+
+      try {
+        const event = JSON.parse(payload)
+        const sessionId = this.normalizeSessionId(event.session_id || event.sessionId)
+        if (sessionId) {
+          this.currentSessionId = sessionId
+          this.activeHistoryId = sessionId
+        }
+
+        if (event.type === 'content') {
+          this.appendAssistantContent(messageId, event.content)
+        }
+        if (event.type === 'done' && !this.getMessageContent(messageId) && event.reply) {
+          this.appendAssistantContent(messageId, event.reply)
+        }
+      } catch (error) {
+        this.appendAssistantContent(messageId, payload)
+      }
+    },
+
+    // 向指定助手消息气泡追加后端流式返回的内容片段。
+    appendAssistantContent(id, content) {
+      if (content === undefined || content === null || content === '') return
+      this.streamBufferMap = {
+        ...this.streamBufferMap,
+        [id]: `${this.streamBufferMap[id] || ''}${content}`
+      }
+      this.startStreamFlush(id)
+    },
+
+    // 启动平滑刷新器，将后端推送的内容缓冲区逐步写入页面。
+    startStreamFlush(id) {
+      if (this.streamFlushTimer) return
+
+      this.streamFlushTimer = setInterval(() => {
+        this.flushStreamBuffer(id)
+      }, 16)
+    },
+
+    // 从缓冲区取出少量字符追加到气泡，减少后端 chunk 较大时的跳动感。
+    flushStreamBuffer(id, flushAll = false) {
+      const buffer = this.streamBufferMap[id] || ''
+      const index = this.messages.findIndex(item => item.id === id)
+      if (index === -1) return
+
+      if (!buffer) {
+        if (flushAll) {
+          this.$set(this.messages, index, {
+            ...this.messages[index],
+            loading: false,
+            streaming: false,
+            content: this.messages[index].content || '模型暂无回复'
+          })
+          this.clearStreamFlushTimer()
+          this.clearStreamBuffer(id)
+        }
+        return
+      }
+
+      const step = flushAll ? buffer.length : this.getSmoothStreamStep(buffer)
+      const nextText = buffer.slice(0, step)
+      const remainText = buffer.slice(step)
+
+      this.$set(this.messages, index, {
+        ...this.messages[index],
+        loading: false,
+        streaming: true,
+        content: `${this.messages[index].content || ''}${nextText}`
+      })
+
+      this.streamBufferMap = {
+        ...this.streamBufferMap,
+        [id]: remainText
+      }
+
+      if (!remainText && flushAll) {
+        this.$set(this.messages, index, {
+          ...this.messages[index],
+          streaming: false
+        })
+        this.clearStreamFlushTimer()
+        this.clearStreamBuffer(id)
+      }
+      this.$nextTick(this.scrollToBottom)
+    },
+
+    // 按缓冲区大小动态控制每帧输出量，兼顾流畅和速度。
+    getSmoothStreamStep(buffer) {
+      if (buffer.length > 120) return 6
+      if (buffer.length > 50) return 4
+      return 2
+    },
+
+    // 清理平滑刷新定时器。
+    clearStreamFlushTimer() {
+      if (this.streamFlushTimer) {
+        clearInterval(this.streamFlushTimer)
+        this.streamFlushTimer = null
+      }
+    },
+
+    // 删除指定消息的流式缓冲内容。
+    clearStreamBuffer(id) {
+      if (!this.streamBufferMap[id]) return
+      const nextBufferMap = { ...this.streamBufferMap }
+      delete nextBufferMap[id]
+      this.streamBufferMap = nextBufferMap
+    },
+
+    // 获取指定消息当前内容，用于判断 done 事件是否需要兜底写入 reply。
+    getMessageContent(id) {
+      const message = this.messages.find(item => item.id === id)
+      return message ? message.content : ''
+    },
+
+    // 结束 SSE 输出，关闭光标动画。
+    finishStreamMessage(id) {
+      this.flushStreamBuffer(id, true)
+    },
+
+    // 取消当前流式请求，避免新对话或离开页面后继续写入。
+    abortStreamRequest() {
+      if (this.streamController) {
+        this.streamController.abort()
+        this.streamController = null
+      }
+      this.clearStreamFlushTimer()
+      this.streamBufferMap = {}
+    },
+
+    // 兼容不同后端字段名，提取助手回复内容。
+    getAssistantReply(data, res) {
+      return data.reply ||
+        data.answer ||
+        data.response ||
+        data.content ||
+        data.message ||
+        res.reply ||
+        res.answer ||
+        res.response ||
+        res.content ||
+        res.msg ||
+        '模型暂无回复'
+    },
+
+    // 兼容多种历史列表返回结构，统一转成左侧栏需要的 id/title。
+    normalizeHistoryList(data) {
+      const list = Array.isArray(data)
+        ? data
+        : data.session_list || data.sessions || data.list || data.data || []
+
+      if (!Array.isArray(list)) return []
+      return list.map((item, index) => {
+        const id = item.session_id || item.id || item.sessionId
+        return {
+          id,
+          title: item.title || item.session_name || item.name || item.first_message || `历史对话 ${index + 1}`
+        }
+      }).filter(item => item.id)
+    },
+
+    // 兼容多种历史消息返回结构，统一转成页面消息气泡格式。
+    normalizeMessageList(data) {
+      const list = Array.isArray(data)
+        ? data
+        : data.message_list || data.messages || data.list || data.data || []
+
+      if (!Array.isArray(list)) return []
+      return list.reduce((messages, item, index) => {
+        const question = item.question || item.user_message || item.user_content || item.prompt
+        const answer = item.answer || item.assistant_message || item.assistant_content || item.reply || item.response
+        if (question && answer) {
+          messages.push({
+            id: this.createMessageId(`${index}_user`),
+            role: 'user',
+            content: this.displayValue(question)
+          })
+          messages.push({
+            id: this.createMessageId(`${index}_assistant`),
+            role: 'assistant',
+            content: this.displayValue(answer)
+          })
+          return messages
+        }
+
+        messages.push({
+          id: item.id || this.createMessageId(index),
+          role: this.normalizeRole(item.role || item.sender || item.type),
+          content: this.displayValue(item.content || item.message || item.text || answer || question)
+        })
+        return messages
+      }, [])
+    },
+
+    // 将后端角色字段统一为页面使用的 user/assistant。
+    normalizeRole(role) {
+      return ['user', 'human', 'customer'].includes(String(role).toLowerCase()) ? 'user' : 'assistant'
+    },
+
+    // 将后端返回的 session_id 统一标准化成字符串。
+    normalizeSessionId(value) {
+      if (value === undefined || value === null || value === '') return ''
+      if (typeof value === 'object') {
+        return value.session_id || value.sessionId || value.id || ''
+      }
+      return String(value)
+    },
+
+    // 兼容响应数据结构；优先取 res.data，没有 data 时返回整个响应对象。
+    extractResponseData(res) {
+      if (!res) return {}
+      if (res.data !== undefined && res.data !== null) return res.data
+      return res
+    },
+
+    // 从本地存储中读取 JSON 数据，解析失败时返回空对象。
+    getStoredJson(key) {
+      try {
+        return JSON.parse(localStorage.getItem(key) || sessionStorage.getItem(key) || '{}')
+      } catch (error) {
+        return {}
+      }
+    },
+
+    // 生成消息气泡唯一 id，避免同一毫秒内多条消息 key 冲突。
+    createMessageId(seed = '') {
+      return `${Date.now()}_${Math.random().toString(16).slice(2)}_${seed}`
+    },
+
+    // 统一处理展示值；对象会格式化为 JSON 字符串。
+    displayValue(value) {
+      if (value === undefined || value === null || value === '') return ''
+      if (typeof value === 'object') return JSON.stringify(value, null, 2)
+      return value
+    },
+
+    // 将聊天内容区域滚动到最底部。
     scrollToBottom() {
       const body = this.$refs.messageBody
       if (body) {
@@ -299,11 +809,49 @@ export default {
     margin-right: 8px;
   }
 
+  span {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   &:hover,
   &.active {
     color: #1e6fff;
     background: #f4f8ff;
   }
+
+  &.is-temporary {
+    color: #1e6fff;
+    background: #eef5ff;
+    border: 1px solid #d7e7ff;
+  }
+
+  &:hover {
+    .delete-history {
+      opacity: 1;
+    }
+  }
+}
+
+.delete-history {
+  margin: 0 0 0 8px !important;
+  color: #98a2b3;
+  opacity: 0;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: #f56c6c;
+  }
+}
+
+.history-empty {
+  padding: 18px 0;
+  color: #98a2b3;
+  text-align: center;
+  font-size: 13px;
 }
 
 .chat-main {
@@ -461,6 +1009,64 @@ export default {
   line-height: 1.7;
 }
 
+.typing-text {
+  color: #8a94a6;
+}
+
+.loading-dots::after {
+  display: inline-block;
+  width: 18px;
+  text-align: left;
+  content: '';
+  animation: loadingDots 1.2s steps(4, end) infinite;
+}
+
+.loading-dots {
+  display: inline-block;
+}
+
+.stream-cursor {
+  display: inline-block;
+  width: 7px;
+  height: 16px;
+  margin-left: 2px;
+  vertical-align: -2px;
+  background: #1e6fff;
+  border-radius: 2px;
+  animation: cursorBlink 0.9s infinite;
+}
+
+@keyframes loadingDots {
+  0% {
+    content: '';
+  }
+
+  25% {
+    content: '.';
+  }
+
+  50% {
+    content: '..';
+  }
+
+  75%,
+  100% {
+    content: '...';
+  }
+}
+
+@keyframes cursorBlink {
+  0%,
+  45% {
+    opacity: 1;
+  }
+
+  46%,
+  100% {
+    opacity: 0;
+  }
+}
+
 .chat-input-area {
   padding: 18px 24px 22px;
   background: #ffffff;
diff --git a/f/web-kboss/src/views/modelManagement/ModelDetail.vue b/f/web-kboss/src/views/modelManagement/ModelDetail.vue
index 04f9165..717148f 100644
--- a/f/web-kboss/src/views/modelManagement/ModelDetail.vue
+++ b/f/web-kboss/src/views/modelManagement/ModelDetail.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="model-detail-page">
     <header class="top-nav">
-      <button class="back-btn" type="button" @click="$router.back()">
+      <button class="back-btn" type="button" @click="goBack">
         <i class="el-icon-arrow-left"></i>
         返回
       </button>
       <span class="nav-divider"></span>
-      <span>Token市集</span>
+      <span class="token-market-link" @click="goTokenMarket">Token市集</span>
       <div class="nav-actions">
         <span>控制台</span>
         <span>用户后台</span>
@@ -21,12 +21,10 @@
         <div class="model-summary">
           <div class="model-title-row">
             <h1>{{ modelInfo.name }}</h1>
-            <el-tag size="mini" type="success">深度推理</el-tag>
+            <el-tag size="mini" type="success">{{ modelInfo.tag }}</el-tag>
           </div>
           <div class="model-meta">
-            <span>中文</span>
-            <span>英文</span>
-            <span>128K上下文</span>
+            <span v-for="item in modelInfo.metaList" :key="item">{{ item }}</span>
           </div>
           <p>{{ modelInfo.description }}</p>
         </div>
@@ -39,11 +37,11 @@
             模型ID：{{ modelInfo.modelId }}
             <i class="el-icon-copy-document"></i>
           </p>
-          <p>当前版本能力稳定，适合内容生成、知识问答、工具调用和复杂任务规划。</p>
+          <p>{{ modelInfo.versionDescription }}</p>
         </div>
         <div class="version-actions">
-          <el-button size="small" @click="$router.push('/modelApiDocument')">API文档</el-button>
-          <el-button size="small" type="primary" @click="$router.push('/modelExperience')">体验</el-button>
+          <el-button size="small" @click="goApiDocument">API文档</el-button>
+          <el-button size="small" type="primary" @click="goExperience">体验</el-button>
         </div>
       </section>
 
@@ -70,13 +68,18 @@
         <div class="price-list">
           <div class="price-item input">
             <span>模型输入</span>
-            <strong>0.0021</strong>
-            <em>元/千Tokens</em>
+            <strong>{{ modelInfo.inputPrice }}</strong>
+            <em>{{ modelInfo.priceUnit }}</em>
           </div>
           <div class="price-item output">
             <span>模型输出</span>
-            <strong>0.0084</strong>
-            <em>元/千Tokens</em>
+            <strong>{{ modelInfo.outputPrice }}</strong>
+            <em>{{ modelInfo.priceUnit }}</em>
+          </div>
+          <div v-if="hasValue(modelInfo.cacheHitInputPrice)" class="price-item cache">
+            <span>缓存命中输入</span>
+            <strong>{{ modelInfo.cacheHitInputPrice }}</strong>
+            <em>{{ modelInfo.priceUnit }}</em>
           </div>
         </div>
       </section>
@@ -86,18 +89,16 @@
         <p>{{ modelInfo.longDescription }}</p>
 
         <h3>2. 模型亮点</h3>
-        <div class="feature-block blue">
-          <i class="el-icon-cpu"></i>
+        <div
+          v-for="(item, index) in featureList"
+          :key="item.label"
+          class="feature-block"
+          :class="index % 2 === 0 ? 'blue' : 'purple'"
+        >
+          <i :class="index % 2 === 0 ? 'el-icon-cpu' : 'el-icon-magic-stick'"></i>
           <div>
-            <strong>推理</strong>
-            <p>擅长处理数学、代码、逻辑分析和复杂任务拆解，适合作为业务助手和智能问答底座。</p>
-          </div>
-        </div>
-        <div class="feature-block purple">
-          <i class="el-icon-magic-stick"></i>
-          <div>
-            <strong>模型调优</strong>
-            <p>提供稳定的上下文理解能力，便于后续结合业务数据进行知识增强和场景优化。</p>
+            <strong>{{ item.label }}</strong>
+            <p>{{ item.value }}</p>
           </div>
         </div>
       </section>
@@ -116,7 +117,14 @@ export default {
         name: 'MiniMax-M2.5',
         modelId: 'abab7c72c278cfba',
         description: 'MiniMax-M2.5 是面向复杂任务处理的通用语言模型，适用于知识问答、文案创作、工具调用和办公生产力场景。',
-        longDescription: 'MiniMax-M2.5 是 MiniMax 推出的新一代旗舰语言模型，致力于提升真实世界复杂任务中的表现。在推理、工具使用和搜索、办公生产力场景中均具备较好的任务完成能力。'
+        longDescription: 'MiniMax-M2.5 是 MiniMax 推出的新一代旗舰语言模型，致力于提升真实世界复杂任务中的表现。在推理、工具使用和搜索、办公生产力场景中均具备较好的任务完成能力。',
+        tag: '对话模型',
+        metaList: ['MiniMax', '对话模型', '192K上下文'],
+        versionDescription: '当前版本能力稳定，适合内容生成、知识问答、工具调用和复杂任务规划。',
+        inputPrice: '0.0021',
+        outputPrice: '0.0084',
+        cacheHitInputPrice: '',
+        priceUnit: '元/千Tokens'
       },
       capabilityList: [
         { label: '接口类型', value: '/v2/chat/completions' },
@@ -132,8 +140,161 @@ export default {
         { label: '单轮输出', value: '32K' },
         { label: '输出长度', value: '128K' },
         { label: '服务速度限制', value: '60 RPM / 250000 TPM' }
+      ],
+      featureList: [
+        { label: '推理', value: '擅长处理数学、代码、逻辑分析和复杂任务拆解，适合作为业务助手和智能问答底座。' },
+        { label: '模型调优', value: '提供稳定的上下文理解能力，便于后续结合业务数据进行知识增强和场景优化。' }
       ]
     }
+  },
+  created() {
+    this.loadModelDetail()
+  },
+  watch: {
+    '$route.query.id'() {
+      this.loadModelDetail()
+    }
+  },
+  methods: {
+    // TOKEN 市集卡片跳转时会缓存完整模型对象，详情页优先使用这份数据渲染。
+    loadModelDetail() {
+      const model = this.getCachedTokenMarketModel()
+      if (!model) return
+
+      const name = this.displayValue(model.display_name || model.model_name)
+      const modelId = this.displayValue(model.llmid || model.model_name || model.id)
+      const modelType = this.displayValue(model.model_type)
+      const provider = this.displayValue(model.provider)
+      const contextLength = this.displayValue(model.context_length)
+      const billingMethod = this.displayValue(model.billing_method)
+      const description = this.normalizeText(model.description)
+
+      this.modelInfo = {
+        name,
+        modelId,
+        description,
+        longDescription: description,
+        tag: modelType,
+        metaList: [provider, modelType, contextLength !== '-' ? `${contextLength}上下文` : '', billingMethod].filter(Boolean),
+        versionDescription: `${name} 当前版本由 ${provider} 提供，适合在 ${modelType} 场景中使用。`,
+        inputPrice: this.formatPrice(model.input_token_price),
+        outputPrice: this.formatPrice(model.output_token_price),
+        cacheHitInputPrice: this.formatPrice(model.cache_hit_input_price),
+        priceUnit: this.getPriceUnit(model.billing_unit)
+      }
+      this.capabilityList = this.parseInfoList(model.capabilities, [
+        { label: '接口类型', value: '-' },
+        { label: '接入ID', value: modelId },
+        { label: '模型类型', value: modelType },
+        { label: '供应商', value: provider }
+      ])
+      this.limitList = this.parseInfoList(model.limitations, [
+        { label: '上下文长度', value: contextLength },
+        { label: '计费方式', value: billingMethod },
+        { label: '计费单位', value: this.displayValue(model.billing_unit) }
+      ])
+      this.featureList = this.parseInfoList(model.highlights, [
+        { label: '模型说明', value: description },
+        { label: '适用场景', value: `${modelType}、内容生成、智能问答` }
+      ])
+    },
+    getCachedTokenMarketModel() {
+      const cache = sessionStorage.getItem('tokenMarketSelectedModel')
+      if (!cache) return null
+
+      try {
+        const model = JSON.parse(cache)
+        const queryId = String(this.$route.query.id || this.$route.query.model_id || '')
+        if (!queryId || String(model.id) === queryId || String(model.llmid) === queryId || String(model.model_name) === queryId) {
+          return model
+        }
+      } catch (error) {
+        console.warn('[模型详情] 解析 TOKEN 市集模型缓存失败', error)
+      }
+      return null
+    },
+    parseInfoList(value, fallback = []) {
+      const parsed = this.safeParse(value)
+      let list = []
+
+      if (Array.isArray(parsed)) {
+        list = parsed.map((item, index) => ({
+          label: this.displayValue(item.name || item.label || item.key || `字段${index + 1}`),
+          value: this.displayValue(this.pickValue(item.value, item.text, item.content))
+        }))
+      } else if (parsed && typeof parsed === 'object') { 
+        list = Object.keys(parsed).map(key => ({
+          label: key,
+          value: this.displayValue(parsed[key])
+        }))
+      } else if (typeof parsed === 'string' && parsed) {
+        list = [{ label: '说明', value: parsed }]
+      }
+
+      return list.length ? list : fallback
+    },
+    normalizeText(value) {
+      const parsed = this.safeParse(value)
+      if (Array.isArray(parsed)) {
+        return parsed.map(item => `${this.displayValue(item.name || item.label)}：${this.displayValue(item.value)}`).join('；')
+      }
+      if (parsed && typeof parsed === 'object') {
+        return Object.keys(parsed).map(key => `${key}：${this.displayValue(parsed[key])}`).join('；')
+      }
+      return this.displayValue(parsed)
+    },
+    safeParse(value) {
+      if (value === undefined || value === null || value === '') return ''
+      if (typeof value !== 'string') return value
+      try {
+        return JSON.parse(value)
+      } catch (error) {
+        return value
+      }
+    },
+    pickValue(...values) {
+      return values.find(value => value !== undefined && value !== null && value !== '')
+    },
+    formatPrice(value) {
+      if (!this.hasValue(value)) return '-'
+      const num = Number(value)
+      if (Number.isNaN(num)) return value
+      return num.toFixed(6).replace(/\.?0+$/, '')
+    },
+    getPriceUnit(unit) {
+      return unit ? `元/${unit}` : '元/千Tokens'
+    },
+    displayValue(value) {
+      if (value === undefined || value === null || value === '') return '-'
+      return value
+    },
+    hasValue(value) {
+      return value !== undefined && value !== null && value !== '' && value !== '-'
+    },
+    goTokenMarket() {
+      this.$router.push({ path: '/product', query: { category: 'TOKEN市集' } })
+    },
+    goBack() {
+      if (this.$route.query.from === 'tokenMarket') {
+        this.goTokenMarket()
+        return
+      }
+      this.$router.back()
+    },
+    buildModelQuery() {
+      return {
+        id: this.$route.query.id,
+        model_id: this.$route.query.model_id || this.$route.query.id,
+        from: 'tokenMarket',
+        category: 'TOKEN市集'
+      }
+    },
+    goApiDocument() {
+      this.$router.push({ name: 'modelApiDocument', query: this.buildModelQuery() })
+    },
+    goExperience() {
+      this.$router.push({ name: 'modelExperience', query: this.buildModelQuery() })
+    }
   }
 }
 </script>
@@ -179,6 +340,14 @@ export default {
   font-size: 13px;
 }
 
+.token-market-link {
+  cursor: pointer;
+
+  &:hover {
+    color: #2f6bff;
+  }
+}
+
 .detail-container {
   width: 920px;
   margin: 28px auto 0;
@@ -283,7 +452,7 @@ export default {
 
 .price-list {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 18px;
 }
 
@@ -312,6 +481,10 @@ export default {
   &.output {
     background: #fff0fa;
   }
+
+  &.cache {
+    background: #f0fdf4;
+  }
 }
 
 .feature-block {
diff --git a/f/web-kboss/src/views/product/allProduct/index.vue b/f/web-kboss/src/views/product/allProduct/index.vue
index 5951174..1a7e311 100644
--- a/f/web-kboss/src/views/product/allProduct/index.vue
+++ b/f/web-kboss/src/views/product/allProduct/index.vue
@@ -1,41 +1,6 @@
 <template>
   <div class="product-service-page">
-    <!-- <div class="page-hero">
-      <div class="hero-content">
-        <span class="hero-tag">Token Market</span>
-        <h2>token市集</h2>
-        <p>汇聚云、算、网、AI 等产品能力，按分类快速查找并进入对应服务。</p>
-      </div>
-      <div class="hero-stats">
-        <div class="stat-card">
-          <span>一级分类</span>
-          <strong>{{ panelData.length }}</strong>
-        </div>
-        <div class="stat-card">
-          <span>当前产品</span>
-          <strong>{{ currentProducts.length }}</strong>
-        </div>
-        <div class="stat-card">
-          <span>全部产品</span>
-          <strong>{{ totalProductCount }}</strong>
-        </div>
-      </div>
-    </div>
-
-    <div class="page-toolbar">
-      <div>
-        <h3>{{ activeCategory || '全部分类' }}</h3>
-        <p>{{ activeCategorySummary }}</p>
-      </div>
-      <el-input
-        v-model="searchKeyword"
-        class="product-search"e     
-        clearable
-        prefix-icon="el-icon-search"
-        placeholder="搜索产品名称、类型或描述"
-      ></el-input>
-    </div> -->
-
+ 
     <!-- 产品分类导航 -->
     <div class="category-nav">
       <div v-for="category in panelData"
@@ -52,7 +17,48 @@
       <!-- 左侧菜单区域（只有有二级或三级菜单时才显示） -->
       <div v-if="hasMenuSidebar" class="menu-sidebar">
 
-        <div class="input">
+        <template v-if="isTokenMarketActive">
+          <div class="input">
+            <el-input
+              v-model="searchKeyword"
+              class="product-search"
+              clearable
+              prefix-icon="el-icon-search"
+              placeholder="输入关键词 搜索模型"
+            ></el-input>
+          </div>
+          <div class="token-filter-section">
+            <h4>模型筛选</h4>
+            <div class="token-filter-grid">
+              <button
+                v-for="item in tokenModelTypeList"
+                :key="item"
+                class="token-filter-item"
+                :class="{ active: tokenActiveModelType === item }"
+                @click="toggleTokenModelType(item)"
+              >
+                {{ item }}
+              </button>
+            </div>
+          </div>
+          <div class="token-filter-section">
+            <h4>提供方</h4>
+            <div class="token-filter-grid">
+              <button
+                v-for="item in tokenProviderList"
+                :key="item"
+                class="token-filter-item"
+                :class="{ active: tokenActiveProvider === item }"
+                @click="toggleTokenProvider(item)"
+              >
+                {{ item }}
+              </button>
+            </div>
+          </div>
+        </template>
+
+        <template v-else>
+          <div class="input">
           <el-input
         v-model="searchKeyword"
         class="product-search"
@@ -90,12 +96,59 @@
             </div>
           </div>
         </div>
+        </template>
       </div>
 
       <!-- 主内容区 -->
       <div class="main-content" :class="{ 'full-width': !hasMenuSidebar }">
+        <template v-if="isTokenMarketActive">
+          <!-- <div class="token-market-toolbar">
+            <span>排序:</span>
+            <button class="token-sort-btn active">综合排序</button>
+            <button class="token-sort-btn">体验</button>
+          </div> -->
+          <div class="token-market-grid">
+            <div
+              v-for="product in displayedTokenProducts"
+              :key="product.id"
+              class="token-market-card"
+              @click="goModelDetail(product)"
+            >
+              <div class="token-card-top">
+                <h3>{{ product.display_name || product.model_name }}</h3>
+                <!-- <span v-if="product.sort_order <= 10" class="token-new-badge">NEW</span> -->
+                <!-- <i class="el-icon-more token-more"></i> -->
+              </div>
+              <div class="token-tags">
+                <span>{{ product.model_type || '-' }}</span>
+                <span>{{ product.billing_method || '-' }}</span>
+                <span>{{ product.provider || '-' }}</span>
+                <span v-if="product.llmid">{{ product.llmid }}</span>
+              </div>
+              <div class="token-price-line">
+                <span>输入 ¥{{ formatTokenPrice(product.input_token_price) }}/千Token</span>
+                <span>输出 ¥{{ formatTokenPrice(product.output_token_price) }}/千Token</span>
+              </div>
+              <div class="token-meta">
+                <span class="token-provider-avatar">{{ getProviderInitial(product.provider) }}</span>
+                <span>{{ product.provider || '-' }}</span>
+              </div>
+              <div class="token-actions">
+                <button @click.stop="goModelApiDocument(product)">
+                  <i class="el-icon-document"></i>
+                  API文档
+                </button>
+                <button class="experience" @click.stop="goModelExperience(product)">
+                  <i class="el-icon-video-play"></i>
+                  体验
+                </button>
+              </div>
+            </div>
+          </div>
+        </template>
+
         <!-- 产品网格 -->
-        <div class="product-grid">
+        <div v-else class="product-grid">
           <div v-for="product in displayedProducts"
                :key="product.id"
                class="product-card"
@@ -126,7 +179,7 @@
         </div>
 
         <!-- 空状态 -->
-        <div v-if="!hasDisplayProducts" class="empty-state">
+        <div v-if="isTokenMarketActive ? !displayedTokenProducts.length : !hasDisplayProducts" class="empty-state">
           <div class="empty-icon">
             <i class="el-icon-box"></i>
           </div>
@@ -139,7 +192,7 @@
 </template>
 
 <script>
-import { reqNavList, reqNewHomeSync, reqNewHomeFestival ,reqTokenMarket} from "@/api/newHome";
+import { reqNavList, reqNewHomeSync, reqNewHomeFestival } from "@/api/newHome";
 import { gotoYuanJingAPI } from '@/api/gotoYuanJing'
 
 export default {
@@ -152,10 +205,17 @@ export default {
       activeThirdId: null,
       searchKeyword: '',
       currentProducts: [],
-      tokenList: []
+      tokenList: [],
+      tokenModelTypeList: [],
+      tokenProviderList: [],
+      tokenActiveModelType: '',
+      tokenActiveProvider: ''
     };
   },
   computed: {
+    isTokenMarketActive() {
+      return this.isTokenMarketCategory(this.activeCategory);
+    },
     currentSubcategories() {
       if (!this.activeCategory || !this.panelData.length) return [];
       const category = this.panelData.find(item => item.firTitle === this.activeCategory);
@@ -205,6 +265,7 @@ export default {
       return `当前分类包含 ${subCount} 个子类，${productCount} 个可选产品`;
     },
     hasMenuSidebar() {
+      if (this.isTokenMarketActive) return true;
       return this.hasSecondLevel || this.hasThirdLevel;
     },
     isSpecialCategory() {
@@ -225,22 +286,113 @@ export default {
     loginState() {
       const userId = sessionStorage.getItem('userId');
       return userId !== null && userId !== 'null' && userId !== '';
+    },
+    displayedTokenProducts() {
+      const keyword = this.searchKeyword.trim().toLowerCase();
+      return this.tokenList.filter(item => {
+        const matchKeyword = !keyword || [
+          item.display_name,
+          item.model_name,
+          item.model_type,
+          item.provider,
+          item.description
+        ].join(' ').toLowerCase().includes(keyword);
+        const matchType = !this.tokenActiveModelType || item.model_type === this.tokenActiveModelType;
+        const matchProvider = !this.tokenActiveProvider || item.provider === this.tokenActiveProvider;
+        return matchKeyword && matchType && matchProvider;
+      });
     }
   },
   async mounted() {
     await this.loadNavData();
     this.initializeDefaultData();
   },
-  created() {
-    this.getTokenList()
-  },
   methods: {
-    async getTokenList(){
-      const res = await reqTokenMarket()
-      console.log('token市集',res);
-      if(res.status===true){
-        this.tokenList = res.data.model_list
-      }
+    // 判断当前一级分类是否为 TOKEN 市集，后续用于切换独立渲染逻辑。
+    isTokenMarketCategory(title) {
+      return ['TOKEN市集', 'Token市集', 'token市集', 'Token Market'].includes(title);
+    },
+
+    // 从导航接口内嵌的 token_market 中取出模型列表和筛选项。
+    setTokenMarketData(category) {
+      const marketData = category && category.token_market && category.token_market.data
+        ? category.token_market.data
+        : {};
+      this.tokenList = Array.isArray(marketData.model_list) ? marketData.model_list : [];
+      this.tokenModelTypeList = Array.isArray(marketData.model_type_list) ? marketData.model_type_list : [];
+      this.tokenProviderList = Array.isArray(marketData.provider_list) ? marketData.provider_list : [];
+    },
+
+    // 点击同一个模型类型时取消筛选，再点其他类型则切换筛选项。
+    toggleTokenModelType(type) {
+      this.tokenActiveModelType = this.tokenActiveModelType === type ? '' : type;
+    },
+
+    // 点击同一个供应商时取消筛选，再点其他供应商则切换筛选项。
+    toggleTokenProvider(provider) {
+      this.tokenActiveProvider = this.tokenActiveProvider === provider ? '' : provider;
+    },
+
+    // TOKEN 市集价格展示，去掉无意义的尾部 0。
+    formatTokenPrice(value) {
+      if (value === undefined || value === null || value === '') return '-';
+      const num = Number(value);
+      if (Number.isNaN(num)) return value;
+      return num.toFixed(4).replace(/\.?0+$/, '');
+    },
+
+    // 供应商头像取首字，避免没有 logo 时卡片显得空。
+    getProviderInitial(provider) {
+      return provider ? provider.slice(0, 1) : 'M';
+    },
+
+    // TOKEN 市集卡片点击：进入模型详情页。
+    goModelDetail(model) {
+      this.cacheTokenMarketModel(model);
+      this.$router.push({
+        name: 'modelDetail',
+        query: {
+          id: model.id,
+          model_id: model.id,
+          llmid: model.llmid || model.model_name || model.id,
+          from: 'tokenMarket',
+          category: 'TOKEN市集'
+        }
+      });
+    },
+
+    // TOKEN 市集 API 文档按钮：进入模型 API 文档页。
+    goModelApiDocument(model) {
+      this.cacheTokenMarketModel(model);
+      this.$router.push({
+        name: 'modelApiDocument',
+        query: {
+          id: model.id,
+          model_id: model.id,
+          from: 'tokenMarket',
+          category: 'TOKEN市集'
+        }
+      });
+    },
+
+    // TOKEN 市集体验按钮：进入模型体验页。
+    goModelExperience(model) {
+      this.cacheTokenMarketModel(model);
+      this.$router.push({
+        name: 'modelExperience',
+        query: {
+          id: model.id,
+          model_id: model.id,
+          from: 'tokenMarket',
+          category: 'TOKEN市集'
+        }
+      });
+    },
+
+    // 详情页需要完整模型字段，这里点击时缓存当前卡片数据，避免只带 id 过去后页面无法渲染。
+    cacheTokenMarketModel(model) {
+      if (!model) return;
+      sessionStorage.setItem('tokenMarketSelectedModel', JSON.stringify(model));
     },
 
     // 生成唯一的二级菜单项key
@@ -269,6 +421,9 @@ export default {
     // 处理导航数据 - 修复数据结构
     processNavData(data) {
       return data.map((category, categoryIndex) => {
+        if (this.isTokenMarketCategory(category.firTitle)) {
+          this.setTokenMarketData(category);
+        }
         // 确保一级分类有唯一标识
         if (!category.uniqueId) {
           category.uniqueId = `category_${categoryIndex}_${category.firTitle}`;
@@ -308,14 +463,30 @@ export default {
     // 初始化默认数据
     initializeDefaultData() {
       if (this.panelData.length > 0) {
-        const firstCategory = this.panelData[0];
-        this.activeCategory = firstCategory.firTitle;
-        this.setDefaultSubcategory(firstCategory);
+        const defaultCategory = this.getDefaultCategory();
+        this.activeCategory = defaultCategory.firTitle;
+        this.setDefaultSubcategory(defaultCategory);
       }
     },
 
+    // 进入 /product 时优先根据路由 query 打开指定分类；没有 query 时默认打开 TOKEN 市集。
+    getDefaultCategory() {
+      const queryCategory = this.$route.query.category || this.$route.query.tab;
+      const categoryFromQuery = queryCategory
+        ? this.panelData.find(item => item.firTitle === queryCategory || this.isTokenMarketCategory(queryCategory) && this.isTokenMarketCategory(item.firTitle))
+        : null;
+      const tokenCategory = this.panelData.find(item => this.isTokenMarketCategory(item.firTitle));
+      return categoryFromQuery || tokenCategory || this.panelData[0];
+    },
+
     // 根据分类设置默认二级菜单
     setDefaultSubcategory(category) {
+      if (this.isTokenMarketCategory(category.firTitle)) {
+        this.activeSubId = null;
+        this.activeThirdId = null;
+        this.currentProducts = [];
+        return;
+      }
       if (category.secMenu && category.secMenu.length > 0) {
         let defaultSubItem = category.secMenu[0];
 
@@ -367,6 +538,11 @@ export default {
       this.activeCategory = category.firTitle;
       this.activeSubId = null;
       this.activeThirdId = null;
+      if (this.isTokenMarketCategory(category.firTitle)) {
+        this.setTokenMarketData(category);
+        this.currentProducts = [];
+        return;
+      }
       this.setDefaultSubcategory(category);
     },
     async goYuanjing() {
@@ -634,6 +810,7 @@ export default {
 
     .menu-sidebar {
       width: 280px;
+      height: calc(100vh - 100px);
       background: #f8f9fa;
       border-radius: 8px;
       padding: 20px;
@@ -990,6 +1167,38 @@ export default {
       border-radius: 18px;
       box-shadow: 0 12px 30px rgba(31, 45, 61, 0.06);
     }
+
+    .token-filter-section {
+      margin-top: 18px;
+
+      h4 {
+        margin: 0 0 10px;
+        color: #98a2b3;
+        font-size: 13px;
+        font-weight: 600;
+      }
+    }
+
+    .token-filter-grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 8px 12px;
+    }
+
+    .token-filter-item {
+      padding: 4px 0;
+      color: #344054;
+      text-align: left;
+      background: transparent;
+      border: 0;
+      cursor: pointer;
+      font-size: 14px;
+
+      &.active {
+        color: #1e6fff;
+        font-weight: 600;
+      }
+    }
   }
 
   .product-content .subcategory-list,
@@ -1009,6 +1218,171 @@ export default {
   .product-content .main-content {
     min-width: 0;
 
+    .token-market-toolbar {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 14px;
+      color: #667085;
+      font-size: 14px;
+    }
+
+    .token-sort-btn {
+      height: 28px;
+      padding: 0 12px;
+      color: #667085;
+      background: #ffffff;
+      border: 1px solid #e5e7eb;
+      border-radius: 8px;
+      cursor: pointer;
+
+      &.active {
+        color: #7c3aed;
+        background: #f5f3ff;
+        border-color: #c4b5fd;
+      }
+    }
+
+    .token-market-grid {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 14px;
+    }
+
+    .token-market-card {
+      flex: 0 0 calc((100% - 28px) / 3);
+      min-width: 0;
+      padding: 14px;
+      background: #ffffff;
+      border: 1px solid #edf1f7;
+      border-radius: 12px;
+      box-shadow: 0 10px 24px rgba(31, 45, 61, 0.05);
+      cursor: pointer;
+      transition: all 0.2s ease;
+
+      &:hover {
+        border-color: #d7e4f5;
+        transform: translateY(-2px);
+        box-shadow: 0 16px 32px rgba(31, 45, 61, 0.08);
+      }
+    }
+
+    .token-card-top {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 8px;
+
+      h3 {
+        flex: 1;
+        margin: 0;
+        color: #1f2d3d;
+        font-size: 14px;
+        font-weight: 700;
+        line-height: 1.35;
+      }
+    }
+
+    .token-new-badge {
+      padding: 1px 6px;
+      color: #ffffff;
+      font-size: 10px;
+      font-weight: 700;
+      background: #3b82f6;
+      border-radius: 5px;
+    }
+
+    .token-more {
+      color: #98a2b3;
+      transform: rotate(90deg);
+    }
+
+    .token-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      padding-bottom: 10px;
+      margin-bottom: 10px;
+      border-bottom: 1px dashed #d8e0ee;
+
+      span {
+        padding: 2px 6px;
+        color: #667085;
+        font-size: 11px;
+        background: #f8fafc;
+        border: 1px solid #edf1f7;
+        border-radius: 6px;
+      }
+    }
+
+    .token-price-line {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-bottom: 8px;
+      color: #1f2937;
+      font-size: 12px;
+      font-weight: 600;
+    }
+
+    .token-meta {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 10px;
+      color: #667085;
+      font-size: 12px;
+    }
+
+    .token-provider-avatar {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      color: #ffffff;
+      font-size: 10px;
+      background: #1e6fff;
+      border-radius: 4px;
+    }
+
+    .token-actions {
+      display: flex;
+      gap: 6px;
+
+      button {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        height: 28px;
+        padding: 0 10px;
+        color: #475467;
+        font-size: 12px;
+        background: #ffffff;
+        border: 1px solid #d8e0ee;
+        border-radius: 7px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+
+        &:hover {
+          color: #1e6fff;
+          border-color: #9ec5ff;
+          background: #f4f8ff;
+        }
+      }
+
+      .experience {
+        color: #4f46e5;
+        border-color: #c7d2fe;
+
+        &:hover {
+          color: #4338ca;
+          border-color: #a5b4fc;
+          background: #eef2ff;
+        }
+      }
+    }
+
     .product-grid {
       grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 
@@ -1180,6 +1554,16 @@ export default {
         width: 100%;
       }
     }
+
+    .product-content .main-content .token-market-card {
+      flex-basis: calc((100% - 14px) / 2);
+    }
+  }
+
+  @media (max-width: 768px) {
+    .product-content .main-content .token-market-card {
+      flex-basis: 100%;
+    }
   }
 }
 </style>
diff --git a/f/web-kboss/src/views/tokenManagement/index.vue b/f/web-kboss/src/views/tokenManagement/index.vue
index 09287ac..a8c0521 100644
--- a/f/web-kboss/src/views/tokenManagement/index.vue
+++ b/f/web-kboss/src/views/tokenManagement/index.vue
@@ -82,7 +82,7 @@
             </el-table-column>
             <el-table-column prop="apikey" label="API Key" min-width="260">
               <template slot-scope="scope">
-                <span class="masked-key">{{ maskApiKey(scope.row.apikey || scope.row.id) }}</span>
+                <span class="masked-key">{{ maskApiKey(scope.row.opc_apikey ) }}</span>
               </template>
             </el-table-column>