33 <div class =" model-select" @click.prevent >
44 <div class =" model-select-content" >
55 <div class =" model-info" >
6- <a-tooltip :title =" model_name " placement =" right" >
7- <span class =" model-text text" > {{ model_name }} </span >
6+ <a-tooltip :title =" displayModelText " placement =" right" >
7+ <span class =" model-text text" > {{ displayModelText }} </span >
88 </a-tooltip >
9- <span class =" model-provider" >{{ model_provider }}</span >
9+ <span class =" model-provider" >{{ displayModelProvider }}</span >
1010 </div >
1111 <div class =" model-status-controls" >
1212 <span
@@ -48,13 +48,17 @@ import { useConfigStore } from '@/stores/config'
4848import { chatModelApi } from ' @/apis/system_api'
4949
5050const props = defineProps ({
51- model_name : {
51+ model_spec : {
5252 type: String ,
5353 default: ' '
5454 },
55- model_provider : {
55+ sep : {
5656 type: String ,
57- default: ' '
57+ default: ' /'
58+ },
59+ placeholder: {
60+ type: String ,
61+ default: ' 请选择模型'
5862 }
5963});
6064
@@ -76,25 +80,48 @@ const modelKeys = computed(() => {
7680 return Object .keys (modelStatus .value || {}).filter (key => modelStatus .value ? .[key])
7781})
7882
83+ const resolvedSep = computed (() => props .sep || ' /' )
84+
85+ const resolvedModel = computed (() => {
86+ const spec = props .model_spec || ' '
87+ const sep = resolvedSep .value
88+ if (spec && sep) {
89+ const index = spec .indexOf (sep)
90+ if (index !== - 1 ) {
91+ const provider = spec .slice (0 , index)
92+ const name = spec .slice (index + sep .length )
93+ if (provider && name) {
94+ return { provider, name }
95+ }
96+ }
97+ }
98+ return { provider: ' ' , name: ' ' }
99+ })
100+
101+ const displayModelProvider = computed (() => resolvedModel .value .provider || ' ' )
102+ const displayModelName = computed (() => resolvedModel .value .name || ' ' )
103+ const displayModelText = computed (() => displayModelName .value || props .placeholder )
104+
79105// 当前模型状态
80106const currentModelStatus = computed (() => {
81107 return state .currentModelStatus
82108})
83109
84110// 检查当前模型状态
85111const checkCurrentModelStatus = async () => {
86- if (! props .model_provider || ! props .model_name ) return
112+ const { provider , name } = resolvedModel .value
113+ if (! provider || ! name) return
87114
88115 try {
89116 state .checkingStatus = true
90- const response = await chatModelApi .getModelStatus (props . model_provider , props . model_name )
117+ const response = await chatModelApi .getModelStatus (provider, name )
91118 if (response .status ) {
92119 state .currentModelStatus = response .status
93120 } else {
94121 state .currentModelStatus = null
95122 }
96123 } catch (error) {
97- console .error (` 检查当前模型 ${ props . model_provider } /${ props . model_name } 状态失败:` , error)
124+ console .error (` 检查当前模型 ${ provider } /${ name } 状态失败:` , error)
98125 state .currentModelStatus = { status: ' error' , message: error .message }
99126 } finally {
100127 state .checkingStatus = false
@@ -128,24 +155,27 @@ const getCurrentModelStatusTooltip = () => {
128155
129156// 选择模型的方法
130157const handleSelectModel = async (provider , name ) => {
131- emit (' select-model' , { provider, name })
158+ const sep = resolvedSep .value || ' /'
159+ const separator = sep || ' /'
160+ const spec = ` ${ provider}${ separator}${ name} `
161+ emit (' select-model' , spec)
132162}
133163
134164< / script>
135165
136166< style lang= " less" scoped>
137167// 变量定义
138- @status- success: # 52c41a ;
139- @status- error: #ff4d4f ;
140- @status- warning: #faad14 ;
141- @status- default: # 999 ;
168+ @status- success: var ( -- color - success) ;
169+ @status- error: var ( -- color - error) ;
170+ @status- warning: var ( -- chart - warning) ;
171+ @status- default: var ( -- gray - 500 ) ;
142172@border- radius: 8px ;
143173@scrollbar- width: 6px ;
144174@status- indicator- padding: 2px 4px ;
145175@status- check- button- padding: 0 4px ;
146176@status- check- button- font- size: 12px ;
147177@status- indicator- font- size: 11px ;
148- @model- provider- color: #aaa ;
178+ @model- provider- color: var ( -- gray - 500 ) ;
149179
150180// 主选择器样式
151181.model - select {
@@ -156,11 +186,12 @@ const handleSelectModel = async (provider, name) => {
156186 cursor: pointer;
157187 border: 1px solid var (-- gray- 200 );
158188 border- radius: @border- radius;
159- background- color: white ;
189+ background- color: var ( -- gray - 0 ) ;
160190 min- width: 0 ;
161191 display: flex;
162192 align- items: center;
163193 gap: 0 .5rem ;
194+ font- size: 13px ;
164195
165196 // 修饰符类
166197 & .borderless {
@@ -188,7 +219,7 @@ const handleSelectModel = async (provider, name) => {
188219 .model - text {
189220 overflow: hidden;
190221 text- overflow: ellipsis;
191- color: # 000 ;
222+ color: var ( -- gray - 1000 ) ;
192223 white- space: nowrap;
193224 }
194225
@@ -270,4 +301,4 @@ const handleSelectModel = async (provider, name) => {
270301 overflow- y: auto;
271302 }
272303}
273- < / style>
304+ < / style>
0 commit comments