@blueking/ai-ui-sdk 0.0.8 → 0.0.9-beta.1

package/dist/hooks/use-style.d.ts

@@ -1 +1,3 @@
+import '../css/style.css';
+import '../css/iconcool.js';
 export declare const useStyle: () => void;

package/dist/main.js

@@ -245,4 +245,4 @@ url(${D}) format("embedded-opentype");
       }
     }`;(A=document.createElement("style")).textContent=e,document.head.appendChild(A)},i=()=>{A&&(A.remove(),A=null)};(0,T.onBeforeMount)(()=>{e()}),(0,T.onBeforeUnmount)(()=>{i()})};function L(A,e,i,t,n,o,g){try{var l=A[o](g),a=l.value}catch(A){i(A);return}l.done?e(a):Promise.resolve(a).then(t,n)}function Y(A){return function(){var e=this,i=arguments;return new Promise(function(t,n){var o=A.apply(e,i);function g(A){L(o,t,n,g,l,"next",A)}function l(A){L(o,t,n,g,l,"throw",A)}g(void 0)})}}function O(A,e,i){return e in A?Object.defineProperty(A,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):A[e]=i,A}class f{stream({sessionCode:A,url:e,headers:i,data:t}){var n=this;return Y(function*(){var o,g;yield null===(o=n.handleStart)||void 0===o?void 0:o.call(n,A);let l=new AbortController;n.controllerMap[A]=l,fetch(e,{method:"post",signal:l.signal,headers:function(A){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{},t=Object.keys(i);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(i).filter(function(A){return Object.getOwnPropertyDescriptor(i,A).enumerable}))),t.forEach(function(e){O(A,e,i[e])})}return A}({"Content-Type":"application/json"},i),mode:"cors",credentials:"include",body:JSON.stringify(t)}).then((g=Y(function*(e){let i=e.body.pipeThrough(new window.TextDecoderStream).getReader(),t="";for(;;)try{let{value:o,done:g}=yield i.read();if(!e.ok){n.handleError(A,o||e.statusText,e.status);break}if(g){n.handleEnd(A);break}(t+o.toString()).split("\n").forEach(i=>{let o=i.replace("data:","").trim();if(C(o)){var g,l;let{event:i,content:a,cover:M,documents:s,result:c,code:u,elapsed_time:r,message:N}=JSON.parse(o);if(!1===c||200!==e.status){n.handleError(A,N||"模型调用失败",u);return}switch(i){case"text":n.handleText(A,a,M);break;case"reference_doc":null===(g=n.handleReferenceDoc)||void 0===g||g.call(n,A,s,M);break;case"think":null===(l=n.handleThink)||void 0===l||l.call(n,A,a,M,r);break;case"done":n.handleEnd(A,M?a:"");break;case"error":n.handleError(A,N||"模型调用失败",u)}t=""}else o&&(t=o)})}catch(e){(null==e?void 0:e.code)!==20&&n.handleError(A,`模型调用失败：${e.message}`,e.code);break}}),function(A){return g.apply(this,arguments)}))})()}stop(A){var e,i;return null===(i=this.controllerMap[A])||void 0===i||null===(e=i.abort)||void 0===e||e.call(i),this.handleEnd(A)}constructor({handleStart:A,handleText:e,handleReferenceDoc:i,handleThink:t,handleEnd:n,handleError:o}){O(this,"handleStart",void 0),O(this,"handleText",void 0),O(this,"handleReferenceDoc",void 0),O(this,"handleThink",void 0),O(this,"handleEnd",void 0),O(this,"handleError",void 0),O(this,"controllerMap",void 0),this.handleStart=A,this.handleText=e,this.handleReferenceDoc=i,this.handleThink=t,this.handleEnd=n,this.handleError=o,this.controllerMap={}}}let b=({handleStart:A,handleText:e,handleReferenceDoc:i,handleThink:t,handleEnd:n,handleError:o,requestOptions:g}={})=>{let l="内容正在生成中...",a=(0,T.ref)(),M=(0,T.ref)({}),s=(0,T.ref)([]),N={},d=(0,T.computed)(()=>{let A=[];for(let e=s.value.length-1;e>=0;e--){let i=s.value[e],t=e+1,n=s.value[t];for(;n&&![u.Ai,u.TokenExpired,u.ImageNotSupported,u.Pause,u.Guide].includes(n.role);)t+=1,n=s.value[t];if(i.role===u.System)break;i.status===c.Fail||(null==n?void 0:n.status)===c.Fail&&[u.User,u.UserImage].includes(i.role)||[u.Time,u.System].includes(i.role)||A.unshift(i)}return A}),I=(0,T.computed)(()=>{var A;let e=null===(A=a.value)||void 0===A?void 0:A.sessionCode;return!!e&&M.value[e]}),D=(0,T.computed)(()=>{var A,e,i;let t=[],n=[],o=[],g=s.value.findLastIndex(A=>A.role===u.System&&["已启用角色","已启用模型"].some(e=>A.content.includes(e))),l=0;null===(i=a.value)||void 0===i||null===(e=i.roleInfo)||void 0===e||null===(A=e.content)||void 0===A||A.forEach(A=>{let e=s.value[g+1+l],i=s.value[g+2+l];if((null==e?void 0:e.content)===A.content&&e.role!==u.System&&(t.push(j(e)),l+=1,(null==e?void 0:e.role)===u.Pause)){for(;i&&i.role===u.System;)l+=1,i=s.value[g+1+l];for(;i&&[u.User,u.UserImage].includes(i.role);)t.push(j(i)),l+=1,i=s.value[g+1+l]}}),n.push(...d.value.map(j));let M=A=>{let e=!0;for(let o=A;o<t.length;o++){var i;t[o].content!==(null===(i=n[o-A])||void 0===i?void 0:i.content)&&(e=!1)}return e};for(let A=0;A<t.length;A++){let e=t[A];if(M(A))break;o.push(e)}return o.push(...n),o.forEach(A=>{A.content=m(A.content),A.content=z(A.content)}),o}),E=new f({handleStart:w,handleText:function(A,i,t){let n=B(A);if(n.content===l)n.content=i;else{if(n.status!==c.Loading)return;n.content=t?i:n.content+i}return null==e?void 0:e(A,n)},handleReferenceDoc:function(A,e,t){let n=B(A),o=h(e);return n.content=t?o:n.content+o,null==i?void 0:i(A,n)},handleThink:function(A,e,i,n){let o=B(A);return o.content=k(o.content,e,i,n),null==t?void 0:t(A,o)},handleEnd:function(A,e){let i=B(A);if(i.status===c.Loading)return M.value[A]=!1,e&&(i.content=e),i.status=c.Success,null==n?void 0:n(A,i);(i.content===l||x(i.content))&&v(A,"聊天内容已中断")},handleError:v});function B(A){var e,i;return(null===(e=a.value)||void 0===e?void 0:e.sessionCode)===A?s.value.at(-1):null===(i=N[A])||void 0===i?void 0:i.at(-1)}function C(A){var e;return(null===(e=a.value)||void 0===e?void 0:e.sessionCode)===A?s.value:N[A]}function Q(A,e){C(A).push(e)}function p(A,e,i){var t;let n=(null===(t=a.value)||void 0===t?void 0:t.sessionCode)===A?s.value:N[A],o=[];return e.forEach(A=>{let e=n.findIndex(e=>e.id===A);if(e>-1){let t=n[e-1],g=n[e+1],l=n[e+2];if(n.splice(e,1),o.push(A),[u.Hidden].includes(null==t?void 0:t.role)){let A=n.findIndex(A=>A.id===t.id);n.splice(A,1),o.push(t.id)}if((null==g?void 0:g.role)===u.Ai||i&&[u.Ai,u.Guide,u.TokenExpired,u.ImageNotSupported,u.Pause].includes(null==g?void 0:g.role)){let A=n.findIndex(A=>A.id===g.id);n.splice(A,1),o.push(g.id)}if([u.Guide].includes(null==l?void 0:l.role)&&i){let A=n.findIndex(A=>A.id===l.id);n.splice(A,1),o.push(l.id)}}}),o}function w(e){M.value[e]=!0;let i={sessionCode:e,role:u.Ai,status:c.Loading,content:l};return Q(e,i),null==A?void 0:A(e,i)}function v(A,e,i){let t=B(A);return t.status=c.Fail,t.content=e,M.value[A]=!1,i===r.TokenExpired&&(t.content="抱歉，您的剩余 Token 不足，无法返回回答内容，请先清空当前会话（上下文仍会作为历史记录保留)）",t.role=u.TokenExpired),i===r.ImageNotSupported&&(t.content="抱歉，当前模型不支持图片内容解析",t.role=u.ImageNotSupported),null==o?void 0:o(A,t,i)}function L(A,e){var i,t,n;if(!(null===(i=a.value)||void 0===i?void 0:i.sessionCode)||!(null==g?void 0:g.url)||I.value)return;let{message:o,cite:l,shortcut:M}=A,r="";r=M?y(M.prompt,l):l?`${o}: "${l}"`:o,s.value.push({sessionCode:null===(t=a.value)||void 0===t?void 0:t.sessionCode,content:o,role:u.User,status:c.Success,cite:l}),E.stream({sessionCode:null===(n=a.value)||void 0===n?void 0:n.sessionCode,url:g.url,headers:null==g?void 0:g.headers,data:{inputs:{chat_history:D.value.slice(0,D.value.length-1),input:r}}}),null==e||e()}return{currentSession:a,sessionContents:s,sessionContentsMap:N,sessionLoadingMap:M,prompts:D,currentSessionLoading:I,chat:function({sessionCode:A,data:e,url:i,headers:t}){E.stream({sessionCode:A,url:i,data:e,headers:t||(null==g?void 0:g.headers)})},sendChat:L,stopChat:function(A){E.stop(A)},plusSessionContent:Q,updateSessionContent:function(A){var e;let i=((null===(e=a.value)||void 0===e?void 0:e.sessionCode)===A.sessionCode?s.value:N[A.sessionCode]).find(e=>+(e.id||0)==+(A.id||0));i&&Object.assign(i,A)},getSessionContentById:function(A,e){return C(e).find(e=>e.id===A)},getLastSessionContentBySessionCode:B,getSessionContentsBySessionCode:C,setCurrentSession:function(A){a.value=A,(null==A?void 0:A.sessionCode)&&(N[A.sessionCode]||(N[A.sessionCode]=[]),s.value=N[A.sessionCode])},setSessionContents:function(A){a.value&&(N[a.value.sessionCode]=A,s.value=A)},deleteSessionContent:function(A,e){return p(A,[e],!0)},deleteSessionContents:function(A,e){return p(A,e,!1)},handleStartChat:w,handleErrorChat:v,reGenerateChat:function(A){if(s.value[A].role!==u.Ai)return;let e=s.value[A-1].content,i=s.value[A-1].cite;s.value.splice(A-1,s.value.length-A+1),L({message:e,cite:i})},reSendChat:function(A,{message:e,cite:i},t){s.value[A].role===u.User&&(s.value.splice(A,s.value.length-A),L({message:e,cite:i},t))},deleteChat:function(A){if(s.value[A].role===u.User){s.value.splice(A,2);return}s.value.splice(A-1,2)}}},S=({handleStart:A,handleEnd:e,handleError:i}={})=>{let t="",n=new f({handleStart:()=>(t="",null==A?void 0:A()),handleText:(A,e,i)=>{i||"正在思考..."===t?t=e:t+=e},handleEnd:()=>("无话可说"===t&&(t=""),null==e?void 0:e(t)),handleError:(A,e,t)=>null==i?void 0:i(e,t)});return{summary:({content:A,url:e,headers:i,model:t})=>{let o=m(z(A)),g=[{role:s.User,content:`你是一个总结大师，请帮助我对下面这段话进行总结。要求总结精炼，不超过 15 个字！且末尾没有标点符号！请注意：如果你无法总结，请回复“无话可说”！
 文字如下：
-${o}`}];n.stream({sessionCode:"summary",url:e,data:{prompts:g,model:t},headers:i})}}},U=()=>{I(86),I(84),w(),v()},G=E.default;if("undefined"!=typeof window){let{currentScript:A}=window.document,e=A&&A.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);e&&(I.p=e[1])}var R=D.eo,F=D.In,Z=D.c_,W=D.bJ,H=D.Ay,P=D.DA,J=D.Y_,X=D.a2,K=D.X3,_=D.S0;export{R as HttpErrorCode,F as SessionContentRole,Z as SessionContentStatus,W as SessionPromptRole,H as default,P as transferSessionContent2SessionPrompt,J as useChat,X as useClickProxy,K as useStyle,_ as useSummary};
+${o}`}];n.stream({sessionCode:"summary",url:e,data:{prompts:g,model:t},headers:i})}}};I(86),I(84);let U=()=>{w(),v()},G=E.default;if("undefined"!=typeof window){let{currentScript:A}=window.document,e=A&&A.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);e&&(I.p=e[1])}var R=D.eo,F=D.In,Z=D.c_,W=D.bJ,H=D.Ay,P=D.DA,J=D.Y_,X=D.a2,K=D.X3,_=D.S0;export{R as HttpErrorCode,F as SessionContentRole,Z as SessionContentStatus,W as SessionPromptRole,H as default,P as transferSessionContent2SessionPrompt,J as useChat,X as useClickProxy,K as useStyle,_ as useSummary};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueking/ai-ui-sdk",
-  "version": "0.0.8",
+  "version": "0.0.9-beta.1",
   "description": "蓝鲸AI UI SDK",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",

package/README.md

@@ -1,420 +0,0 @@
-# 蓝鲸 AI UI SDK
-
-## 介绍
-
-蓝鲸 AI UI SDK (@blueking/ai-ui-sdk) 是一个用于快速构建 AI 应用前端界面的工具包。它提供了一系列组件和 hooks，帮助开发者简化 AI 聊天界面的开发过程，包括聊天功能、引用资料展示、AI 思考过程可视化等功能。
-
-## 安装
-
-```bash
-npm install @blueking/ai-ui-sdk
-```
-
-## 主要功能
-
-- **聊天功能**：管理 AI 对话的完整生命周期
-- **引用资料展示**：显示 AI 在回答中引用的文档资料
-- **思考过程可视化**：展示 AI 的思考过程和推理步骤
-- **内容总结**：快速对对话内容进行摘要总结
-- **统一样式**：提供一致的 UI 样式和图标
-- **可拖拽和缩放的聊天窗口**：支持自定义位置和大小的聊天界面
-- **快捷指令功能**：支持预设的快捷操作和自定义指令
-- **多语言支持**：内置国际化支持
-
-## 使用指南
-
-### 基本设置
-
-```typescript
-import { useStyle, useChat, useClickProxy } from '@blueking/ai-ui-sdk';
-
-// 引入样式和图标
-useStyle();
-
-// 设置全局点击代理事件
-useClickProxy();
-
-// 初始化聊天
-const {
-  currentSession,
-  sessionContents,
-  sendChat,
-  stopChat,
-  setCurrentSession,
-  currentSessionLoading,
-  reGenerateChat,
-  reSendChat,
-  deleteChat,
-} = useChat({
-  handleStart: () => {
-    console.log('聊天开始');
-  },
-  handleText: () => {
-    console.log('收到文本消息');
-  },
-  handleEnd: () => {
-    console.log('聊天结束');
-  },
-  requestOptions: {
-    url: 'your-api-endpoint',
-  },
-});
-```
-
-### 创建聊天会话
-
-```typescript
-// 设置当前会话
-const session: ISession = {
-  sessionCode: '1',
-  sessionName: 'test',
-  model: '',
-};
-setCurrentSession(session);
-
-// 发送聊天消息
-sendChat({
-  message: '你的问题',
-  cite: '选中的文本', // 可选，引用的文本内容
-});
-
-// 使用快捷指令发送消息
-sendChat({
-  message: '快捷指令标签',
-  cite: '选中的文本',
-  shortcut: {
-    label: '快捷指令名称',
-    key: 'shortcut-key',
-    prompt: '预设的提示模板',
-    icon: '图标', // 可选
-  },
-});
-
-// 停止正在进行的聊天
-stopChat(session.sessionCode);
-```
-
-### 完整的聊天界面示例
-
-```vue
-<template>
-  <div class="ai-blueking-wrapper">
-    <vue-draggable-resizable
-      v-if="isShow"
-      :active="isShow"
-      :draggable="true"
-      :h="height"
-      :min-height="minHeight"
-      :min-width="minWidth"
-      :parent="true"
-      :prevent-deactivation="true"
-      :resizable="true"
-      :w="width"
-      :x="left"
-      :y="top"
-      class-name="ai-blueking-container-wrapper"
-      drag-handle=".drag-handle"
-      @dragging="handleDragging"
-      @resizing="handleResizing"
-    >
-      <div class="ai-blueking-container">
-        <!-- 聊天界面内容 -->
-        <div class="content-wrapper">
-          <div class="message-wrapper">
-            <render-message
-              v-for="(message, index) in sessionContents"
-              :key="message.id"
-              :message="message"
-              :index="index"
-              @delete="handleDelete"
-              @regenerate="handleRegenerate"
-              @resend="handleResend"
-            />
-          </div>
-          
-          <div class="chat-input-container">
-            <ChatInputBox
-              v-model="inputMessage"
-              :loading="currentSessionLoading"
-              :shortcuts="shortcuts"
-              @send="handleSendMessage"
-              @shortcut-click="handleShortcutClick"
-              @stop="handleStop"
-            />
-          </div>
-        </div>
-      </div>
-    </vue-draggable-resizable>
-  </div>
-</template>
-```
-
-### 快捷指令配置
-
-```typescript
-// 默认快捷指令示例
-const DEFAULT_SHORTCUTS: ShortCut[] = [
-  {
-    label: '解释代码',
-    key: 'explain-code',
-    prompt: '请解释以下代码的功能：{ SELECTED_TEXT }',
-    icon: 'code-icon',
-  },
-  // 更多快捷指令...
-];
-
-// 在组件中使用
-const props = defineProps<{
-  shortcuts?: ShortCut[];
-}>();
-```
-
-## 类型定义
-
-### 会话类型
-
-```typescript
-interface ISession {
-  sessionCode: string;
-  sessionName: string;
-  model: string;
-  roleInfo?: {
-    collectionId: number;
-    collectionName: string;
-    content: ISessionPrompt[];
-    variables: any[];
-  };
-}
-```
-
-### 聊天内容类型
-
-```typescript
-interface ISessionContent {
-  id?: number;
-  role: SessionContentRole;
-  content: string;
-  status?: SessionContentStatus;
-  sessionCode: string;
-  cite?: string;
-  time?: string;
-}
-```
-
-### 快捷指令类型
-
-```typescript
-interface ShortCut {
-  label: string;
-  key: string;
-  prompt: string;
-  icon?: string;
-}
-```
-
-## 高级功能
-
-### 消息重发和重新生成
-
-```typescript
-// 重新生成 AI 回复
-const handleRegenerate = (index: number) => {
-  reGenerateChat(index);
-};
-
-// 重新发送用户消息
-const handleResend = (index: number, value: { message: string; cite: string }) => {
-  reSendChat(index, value);
-};
-```
-
-### 消息删除
-
-```typescript
-const handleDelete = (index: number) => {
-  deleteChat(index);
-};
-```
-
-## 样式定制
-
-SDK 提供了基础的样式和主题支持，你可以通过覆盖 CSS 变量来自定义界面外观：
-
-```scss
-.ai-blueking-container {
-  // 自定义样式
-}
-
-.message-wrapper {
-  // 消息列表样式
-}
-
-.chat-input-container {
-  // 输入框样式
-}
-```
-
-## 对话组件示例
-
-### 示例：使用 `useChat` Hook
-
-以下是一个完整的对话组件示例，展示了如何正确使用 `useChat` hook。该示例包括如何设置会话、发送消息、处理回调以及配置请求选项。
-
-```typescript
-import { useStyle, useChat } from '@blueking/ai-ui-sdk';
-
-// 引入样式和图标
-useStyle();
-
-// 初始化聊天
-const {
-  currentSession,
-  sessionContents,
-  sendChat,
-  stopChat,
-  setCurrentSession,
-  currentSessionLoading,
-  reGenerateChat,
-  reSendChat,
-  deleteChat,
-} = useChat({
-  handleStart: () => {
-    scrollToBottomIfNeeded();
-  },
-  handleText: () => {
-    scrollToBottomIfNeeded();
-  },
-  handleEnd: () => {
-    scrollToBottomIfNeeded();
-  },
-  requestOptions: {
-    url: props.url,
-  },
-});
-
-// 设置当前会话
-const session: ISession = {
-  sessionCode: '1',
-  sessionName: 'test',
-  model: '',
-};
-setCurrentSession(session);
-
-// 发送聊天消息
-sendChat({
-  message: '你的问题',
-  cite: '选中的文本', // 可选，引用的文本内容
-});
-
-// 使用快捷指令发送消息
-sendChat({
-  message: '快捷指令标签',
-  cite: '选中的文本',
-  shortcut: {
-    label: '快捷指令名称',
-    key: 'shortcut-key',
-    prompt: '预设的提示模板',
-    icon: '图标', // 可选
-  },
-});
-
-// 停止正在进行的聊天
-stopChat(session.sessionCode);
-
-// 重新生成 AI 回复
-const handleRegenerate = (index: number) => {
-  reGenerateChat(index);
-};
-
-// 重新发送用户消息
-const handleResend = (index: number, value: { message: string; cite: string }) => {
-  reSendChat(index, value);
-};
-
-// 删除消息
-const handleDelete = (index: number) => {
-  deleteChat(index);
-};
-
-// 滚动到底部
-const scrollToBottomIfNeeded = () => {
-  // 实现滚动到底部的逻辑
-};
-```
-
-### 代码说明
-
-- **`useStyle()`**: 引入 SDK 的样式和图标。
-- **`useChat()`**: 初始化聊天功能，返回多个方法和状态用于管理聊天会话。
-  - **`currentSession`**: 当前会话对象。
-  - **`sessionContents`**: 当前会话中的所有消息内容。
-  - **`sendChat()`**: 发送聊天消息。
-  - **`stopChat()`**: 停止正在进行的聊天。
-  - **`setCurrentSession()`**: 设置当前会话。
-  - **`currentSessionLoading`**: 当前会话是否正在加载。
-  - **`reGenerateChat()`**: 重新生成 AI 回复。
-  - **`reSendChat()`**: 重新发送用户消息。
-  - **`deleteChat()`**: 删除消息。
-- **`handleStart`**: 聊天开始时的回调函数。
-- **`handleText`**: 收到文本消息时的回调函数。
-- **`handleEnd`**: 聊天结束时的回调函数。
-- **`requestOptions`**: 配置请求选项，包括 API 的 URL。
-
-## 注意事项
-
-- SDK 依赖 Vue 3，请确保项目中已安装
-- 建议使用 TypeScript 以获得更好的类型提示
-
-## 版本升级指南
-
-### 从 0.9.x 升级到 1.0.0
-
-1. **更新依赖**：
-   ```bash
-   npm install @blueking/ai-ui-sdk@1.0.0
-   ```
-
-2. **迁移指南**：
-   - `useChat` hook 的 `requestOptions` 参数现在需要包含 `url` 属性。
-   - 移除了 `useClickProxy`，请使用新的 `useGlobalClickHandler`。
-   - 新增了 `useStyle` 的 `theme` 参数，用于自定义主题。
-
-3. **示例**：
-   ```typescript
-   import { useStyle, useChat } from '@blueking/ai-ui-sdk';
-
-   // 引入样式和图标
-   useStyle({ theme: 'dark' });
-
-   // 初始化聊天
-   const {
-     currentSession,
-     sessionContents,
-     sendChat,
-     stopChat,
-     setCurrentSession,
-     currentSessionLoading,
-     reGenerateChat,
-     reSendChat,
-     deleteChat,
-   } = useChat({
-     handleStart: () => {
-       console.log('聊天开始');
-     },
-     handleText: () => {
-       console.log('收到文本消息');
-     },
-     handleEnd: () => {
-       console.log('聊天结束');
-     },
-     requestOptions: {
-       url: 'your-api-endpoint',
-     },
-   });
-   ```
-
-4. **常见问题**：
-   - **Q: 如何处理 API 请求失败？**
-     - A: 使用 `try-catch` 块捕获 `sendChat` 和 `reGenerateChat` 的错误。
-   - **Q: 如何自定义聊天窗口的样式？**
-     - A: 通过覆盖 CSS 变量来自定义界面外观。