caoxiaozhu/X-Agents
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化暗色主题样式，将原生select替换为el-select

Browse Source 
- 优化el-select组件的暗色主题样式，包括输入框、下拉菜单、选中状态等
- 在Agents、MCP、ModelAPIs页面中将原生select替换为Element Plus el-select组件
- 提升UI一致性和用户体验

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
DESKTOP-72TV0V4\caoxiaozhu
2026-03-05 11:31:36 +08:00
parent 2154db01cf
commit 3c33f15f82
4 changed files with 134 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
web/src/views/Agents.vue
View File

@@ -248,15 +248,12 @@ const statusClass = (status: string) => {
class="w-full bg-dark-600 border border-dark-500 rounded-lg py-2 pl-10 pr-4 text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange"
>
</div>
<select
v-model="filterStatus"
class="bg-dark-600 border border-dark-500 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-primary-orange"
>
<option value="all">All Status</option>
<option value="running">Running</option>
<option value="stopped">Stopped</option>
<option value="error">Error</option>
</select>
<el-select v-model="filterStatus" placeholder="Select" class="w-40" size="large">
<el-option label="All Status" value="all" />
<el-option label="Running" value="running" />
<el-option label="Stopped" value="stopped" />
<el-option label="Error" value="error" />
</el-select>
</div>
<!-- Agents 列表 -->
@@ -354,28 +351,22 @@ const statusClass = (status: string) => {
<div>
<label class="block text-sm font-medium text-gray-300 mb-2">Framework</label>
<select
v-model="editForm.framework"
class="w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-primary-orange"
>
<option value="Google ADK">Google ADK</option>
<option value="OpenAI">OpenAI</option>
<option value="PydanticAI">PydanticAI</option>
<option value="LangChain">LangChain</option>
</select>
<el-select v-model="editForm.framework" placeholder="Select" class="w-full" size="large">
<el-option label="Google ADK" value="Google ADK" />
<el-option label="OpenAI" value="OpenAI" />
<el-option label="PydanticAI" value="PydanticAI" />
<el-option label="LangChain" value="LangChain" />
</el-select>
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-2">Model</label>
<select
v-model="editForm.model"
class="w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-primary-orange"
>
<option value="gemini-2.0-flash">gemini-2.0-flash</option>
<option value="gpt-4o">gpt-4o</option>
<option value="gpt-4o-mini">gpt-4o-mini</option>
<option value="claude-3-5-sonnet">claude-3-5-sonnet</option>
</select>
<el-select v-model="editForm.model" placeholder="Select" class="w-full" size="large">
<el-option label="gemini-2.0-flash" value="gemini-2.0-flash" />
<el-option label="gpt-4o" value="gpt-4o" />
<el-option label="gpt-4o-mini" value="gpt-4o-mini" />
<el-option label="claude-3-5-sonnet" value="claude-3-5-sonnet" />
</el-select>
</div>
<div>
@@ -464,14 +455,14 @@ const statusClass = (status: string) => {
<i class="fa-solid fa-brain text-primary-cyan"></i>
<h4 class="font-medium text-white">Model</h4>
</div>
<select
v-model="newAgentForm.model"
class="w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary-orange transition-colors cursor-pointer"
>
<option v-for="model in models.find(m => m.name === newAgentForm.framework)?.models" :key="model" :value="model">
{{ model }}
</option>
</select>
<el-select v-model="newAgentForm.model" placeholder="Select" class="w-full" size="large">
<el-option
v-for="model in models.find(m => m.name === newAgentForm.framework)?.models"
:key="model"
:label="model"
:value="model"
/>
</el-select>
</div>
<!-- Agent 名称 -->