Hass/xiaozhi-esp32-server
1
0
Fork 0
mirror of https://github.com/xinnan-tech/xiaozhi-esp32-server.git synced 2026-07-21 22:53:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'py-device-calling' of https://github.com/xinnan-tech/xiaozhi-esp32-server into py-device-calling

Browse Source
This commit is contained in:
hrz
2026-05-31 10:30:54 +08:00
parent 7f2675f9df 69fd5a1ea8
commit cfcf68d4ce
16 changed files with 459 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/device-call-guide.md
+73 -5
View File
@@ -35,19 +35,87 @@
- 在设备A的配置中勾选设备B → 设备A可与设备B通信
- 在设备B的配置中勾选设备A → 设备B可与设备A通信
### 第三步：固件端添加远程唤醒工具
### 第三步：在智能体配置添加呼叫工具
1. 在虾哥代码的基础上增加远程唤醒工具MCP：[xiaozhi-esp32](https://github.com/78/xiaozhi-esp32/pull/1244/changes)
2. 按照 [固件编译烧录指南](firmware-build.md) 完成固件烧录
1. 在智控台顶部菜单点击 **智能体管理**
2. 在刚刚配置设备联系人的相关智能体中点击 **编辑角色**
3. 在右侧详情面板中，点击 **编辑功能**
4. 勾选 **设备呼叫设备** 工具
5. 点击 **保存配置** 确认
6. 在外侧再次点击 **保存配置** ，随即重启设备
### 第四步：配置MQTT网关服务
### 第四步：固件端添加远程唤醒工具
1. 在[xiaozhi-esp32](https://github.com/78/xiaozhi-esp32) 代码的基础上增加远程唤醒工具MCP，版本支持为2.1.0至2.2.6（2026年5月29日的版本）
2. 在application.h文件中添加远程唤醒函数声明
```cpp
void RemoteWakeup(const std::string& reason);
```
3. 在application.cc文件中添加远程唤醒函数
```cpp
void Application::RemoteWakeup(const std::string& reason){
if (!protocol_) {
return;
}
auto state = GetDeviceState();
if (state == kDeviceStateIdle) {
audio_service_.EncodeWakeWord();
if (!protocol_->IsAudioChannelOpened()) {
SetDeviceState(kDeviceStateConnecting);
if (!protocol_->OpenAudioChannel()) {
audio_service_.EnableWakeWordDetection(true);
return;
}
}
std::string wake_word = reason;
#if CONFIG_USE_AFE_WAKE_WORD || CONFIG_USE_CUSTOM_WAKE_WORD
// Encode and send the wake word data to the server
while (auto packet = audio_service_.PopWakeWordPacket()) {
protocol_->SendAudio(std::move(packet));
}
// Set the chat state to wake word detected
protocol_->SendWakeWordDetected(wake_word);
SetListeningMode(aec_mode_ == kAecOff ? kListeningModeAutoStop : kListeningModeRealtime);
#else
// Set flag to play popup sound after state changes to listening
// (PlaySound here would be cleared by ResetDecoder in EnableVoiceProcessing)
play_popup_on_listening_ = true;
SetListeningMode(aec_mode_ == kAecOff ? kListeningModeAutoStop : kListeningModeRealtime);
#endif
} else if (state == kDeviceStateSpeaking) {
AbortSpeaking(kAbortReasonWakeWordDetected);
SetDeviceState(kDeviceStateIdle);
} else if (state == kDeviceStateActivating) {
SetDeviceState(kDeviceStateIdle);
}
}
```
4. 在mcp_server.cc文件中添加远程唤醒工具
```cpp
AddUserOnlyTool("self.remote_wakeup", "Remote wakeup function with configurable parameters",
PropertyList({
Property("reason", kPropertyTypeString, "Wakeup reason"),
}),
[this](const PropertyList& properties) -> ReturnValue {
std::string reason = properties["reason"].value<std::string>();
ESP_LOGI(TAG, "Wakeup reason=%s", reason.c_str());
auto& app = Application::GetInstance();
app.RemoteWakeup(reason);
return true;
```
5. 按照 [固件编译烧录指南](firmware-build.md) 完成固件烧录
### 第五步：配置MQTT网关服务
1. 部署MQTT网关服务，参考 [MQTT网关集成文档](mqtt-gateway-integration.md)
2. 如果已经部署请确认代码的版本是2026年5月27日的版本
## 呼叫流程说明
准备两个设备，在智控台上面配置好通讯权限之后，在其中一个小智对话那里对他说：”呼叫XXX“,观察设备B是否响应。
准备两个设备，在智控台上面配置好通讯权限和在智能体中添加呼叫工具之后，在其中一个小智对话那里对他说：”呼叫XXX“，观察设备B是否响应。
## 常见问题
main/manager-api/src/main/java/xiaozhi/common/constant/Constant.java
+5
View File
@@ -146,6 +146,11 @@ public interface Constant {
*/
String SERVER_AUTH_ENABLED = "server.auth.enabled";
/**
* 系统功能菜单配置
*/
String SYSTEM_WEB_MENU = "system-web.menu";
/**
* 无记忆
*/
main/manager-api/src/main/java/xiaozhi/modules/agent/service/AgentPluginMappingService.java
+9 -2
View File
@@ -14,7 +14,7 @@ public interface AgentPluginMappingService extends IService<AgentPluginMapping>
/**
* 根据智能体id获取插件参数
*
*
* @param agentId
* @return
*/
@@ -22,8 +22,15 @@ public interface AgentPluginMappingService extends IService<AgentPluginMapping>
/**
* 根据智能体id删除插件参数
*
*
* @param agentId
*/
void deleteByAgentId(String agentId);
/**
* 根据插件ID删除所有智能体的插件映射
*
* @param pluginId 插件ID
*/
void deleteByPluginId(String pluginId);
}
main/manager-api/src/main/java/xiaozhi/modules/agent/service/impl/AgentPluginMappingServiceImpl.java
+7
View File
@@ -104,4 +104,11 @@ public class AgentPluginMappingServiceImpl extends ServiceImpl<AgentPluginMappin
agentPluginMappingMapper.delete(updateWrapper);
}
@Override
public void deleteByPluginId(String pluginId) {
UpdateWrapper<AgentPluginMapping> updateWrapper = new UpdateWrapper<>();
updateWrapper.eq("plugin_id", pluginId);
agentPluginMappingMapper.delete(updateWrapper);
}
}
main/manager-api/src/main/java/xiaozhi/modules/sys/controller/SysParamsController.java
+6 -1
View File
@@ -114,7 +114,12 @@ public class SysParamsController {
// 校验mqtt密钥长度
validateMqttSecretLength(dto.getParamCode(), dto.getParamValue());
sysParamsService.update(dto);
// 如果是系统功能菜单配置，使用特殊处理
if (Constant.SYSTEM_WEB_MENU.equals(dto.getParamCode())) {
sysParamsService.updateSystemWebMenu(dto.getParamValue());
} else {
sysParamsService.update(dto);
}
configService.getConfig(false);
return new Result<Void>();
}
main/manager-api/src/main/java/xiaozhi/modules/sys/service/SysParamsService.java
+15
View File
@@ -53,4 +53,19 @@ public interface SysParamsService extends BaseService<SysParamsEntity> {
* 初始化服务器密钥
*/
void initServerSecret();
/**
* 获取系统功能菜单配置
*
* @param fromCache 是否从缓存获取
* @return 系统功能菜单配置JSON字符串
*/
String getSystemWebMenu(boolean fromCache);
/**
* 更新系统功能菜单配置（自动处理功能相关的插件清理）
*
* @param configJson 新的系统功能菜单配置JSON
*/
void updateSystemWebMenu(String configJson);
}
main/manager-api/src/main/java/xiaozhi/modules/sys/service/impl/SysParamsServiceImpl.java
+61 -1
View File
@@ -22,6 +22,7 @@ import xiaozhi.common.service.impl.BaseServiceImpl;
import xiaozhi.common.utils.ConvertUtils;
import xiaozhi.common.utils.JsonUtils;
import xiaozhi.common.utils.SM2Utils;
import xiaozhi.modules.agent.service.AgentPluginMappingService;
import xiaozhi.modules.sys.dao.SysParamsDao;
import xiaozhi.modules.sys.dto.SysParamsDTO;
import xiaozhi.modules.sys.entity.SysParamsEntity;
@@ -35,6 +36,7 @@ import xiaozhi.modules.sys.service.SysParamsService;
@Service
public class SysParamsServiceImpl extends BaseServiceImpl<SysParamsDao, SysParamsEntity> implements SysParamsService {
private final SysParamsRedis sysParamsRedis;
private final AgentPluginMappingService agentPluginMappingService;
@Override
public PageData<SysParamsDTO> page(Map<String, Object> params) {
@@ -270,4 +272,62 @@ public class SysParamsServiceImpl extends BaseServiceImpl<SysParamsDao, SysParam
}
return true;
}
}
@Override
public String getSystemWebMenu(boolean fromCache) {
return getValue(Constant.SYSTEM_WEB_MENU, fromCache);
}
@Override
@Transactional(rollbackFor = Exception.class)
public void updateSystemWebMenu(String configJson) {
// 获取当前配置
String currentConfig = getSystemWebMenu(false);
Map<String, Object> currentMap = null;
Map<String, Object> newMap = null;
try {
if (StringUtils.isNotBlank(currentConfig)) {
currentMap = JsonUtils.parseObject(currentConfig, Map.class);
}
if (StringUtils.isNotBlank(configJson)) {
newMap = JsonUtils.parseObject(configJson, Map.class);
}
} catch (Exception e) {
throw new RenException(ErrorCode.PARAM_JSON_INVALID);
}
// 检查addressBook功能是否被关闭
if (currentMap != null && newMap != null) {
Map<String, Object> currentFeatures = (Map<String, Object>) currentMap.get("features");
Map<String, Object> newFeatures = (Map<String, Object>) newMap.get("features");
if (currentFeatures != null && newFeatures != null) {
Object currentAddressBookObj = currentFeatures.get("addressBook");
Object newAddressBookObj = newFeatures.get("addressBook");
Boolean currentEnabled = false;
Boolean newEnabled = false;
if (currentAddressBookObj instanceof Map) {
Map<String, Object> currentAddressBook = (Map<String, Object>) currentAddressBookObj;
currentEnabled = currentAddressBook.get("enabled") != null
? (Boolean) currentAddressBook.get("enabled") : false;
}
if (newAddressBookObj instanceof Map) {
Map<String, Object> newAddressBook = (Map<String, Object>) newAddressBookObj;
newEnabled = newAddressBook.get("enabled") != null
? (Boolean) newAddressBook.get("enabled") : false;
}
// 如果之前是启用状态，现在被禁用，删除所有call_device插件
if (Boolean.TRUE.equals(currentEnabled) && !Boolean.TRUE.equals(newEnabled)) {
agentPluginMappingService.deleteByPluginId("SYSTEM_PLUGIN_CALL_DEVICE");
}
}
}
// 更新配置
updateValueByCode(Constant.SYSTEM_WEB_MENU, configJson);
}
}
main/manager-web/src/components/FunctionDialog.vue
+36 -10
View File
@@ -209,16 +209,27 @@ export default {
// 功能状态
featureStatus: {
mcpAccessPoint: false
mcpAccessPoint: false,
addressBook: false
}
}
},
computed: {
selectedList() {
return this.allFunctions.filter(f => this.selectedNames.includes(f.name));
const list = this.allFunctions.filter(f => this.selectedNames.includes(f.name));
// 如果通讯录功能未启用，过滤掉设备呼叫设备插件
if (!this.featureStatus.addressBook) {
return list.filter(f => f.providerCode !== 'call_device');
}
return list;
},
unselected() {
return this.allFunctions.filter(f => !this.selectedNames.includes(f.name));
const list = this.allFunctions.filter(f => !this.selectedNames.includes(f.name));
// 如果通讯录功能未启用，过滤掉设备呼叫设备插件
if (!this.featureStatus.addressBook) {
return list.filter(f => f.providerCode !== 'call_device');
}
return list;
}
},
watch: {
@@ -239,11 +250,23 @@ export default {
}
});
},
value(v) {
async value(v) {
this.dialogVisible = v;
if (v) {
// 加载功能状态（需要在初始化选中态之前）
await this.loadFeatureStatus();
// 对话框打开时，初始化选中态
this.selectedNames = this.functions.map(f => f.name);
// 如果通讯录功能未启用，从已选列表中移除设备呼叫设备插件
if (!this.featureStatus.addressBook) {
this.selectedNames = this.selectedNames.filter(name => {
const func = this.allFunctions.find(f => f.name === name);
return func && func.providerCode !== 'call_device';
});
}
// 把后端传来的 this.functions（带 params）merge 到 allFunctions 上
this.functions.forEach(saved => {
const idx = this.allFunctions.findIndex(f => f.name === saved.name);
@@ -255,9 +278,6 @@ export default {
// 右侧默认指向第一个
this.currentFunction = this.selectedList[0] || null;
// 加载功能状态
this.loadFeatureStatus();
// 加载MCP数据
this.loadMcpAddress();
this.loadMcpTools();
@@ -274,10 +294,11 @@ export default {
async loadFeatureStatus() {
// 确保featureManager已初始化完成
await featureManager.waitForInitialization();
const config = featureManager.getConfig();
this.featureStatus = {
mcpAccessPoint: config.mcpAccessPoint || false
mcpAccessPoint: config.mcpAccessPoint || false,
addressBook: config.addressBook || false
};
},
@@ -413,7 +434,7 @@ export default {
this.tempFunctions = {};
this.hasSaved = true;
const selected = this.selectedList.map(f => {
let selected = this.selectedList.map(f => {
const modified = this.modifiedFunctions[f.name];
return {
id: f.id,
@@ -424,6 +445,11 @@ export default {
}
});
// 如果通讯录功能未启用，自动取消已选的设备呼叫设备插件
if (!this.featureStatus.addressBook) {
selected = selected.filter(f => f.providerCode !== 'call_device');
}
this.$emit('update-functions', selected);
this.dialogVisible = false;
// 通知父组件对话框已关闭且已保存
main/manager-web/src/components/HeaderBar.vue
+1 -1
View File
@@ -669,7 +669,7 @@ export default {
gap: 25px;
position: absolute;
left: 50%;
transform: translateX(-50%);
transform: translateX(calc(-50% - 80px));
}
.header-right {
main/manager-web/src/i18n/de.js
+1
View File
@@ -1501,6 +1501,7 @@ export default {
'addressBookManagement.setPermissionDesc': 'Festlegen welche Geräte das aktuelle Gerät anrufen kann ({count} ausgewählt)',
'addressBookManagement.selectAll': 'Alle auswählen',
'addressBookManagement.deselectAll': 'Alle abwählen',
'addressBookManagement.save': 'Berechtigungen speichern',
// Address Book Management page - operation messages
'addressBookManagement.aliasSaved': 'Alias gespeichert',
main/manager-web/src/i18n/en.js
+1
View File
@@ -1501,6 +1501,7 @@ export default {
'addressBookManagement.setPermissionDesc': 'Set which devices the current device can call ({count} selected)',
'addressBookManagement.selectAll': 'Select All',
'addressBookManagement.deselectAll': 'Deselect All',
'addressBookManagement.save': 'Save Permissions',
// Address Book Management page - operation messages
'addressBookManagement.aliasSaved': 'Alias saved',
main/manager-web/src/i18n/pt_BR.js
+1
View File
@@ -1501,6 +1501,7 @@ export default {
'addressBookManagement.setPermissionDesc': 'Definir quais dispositivos o dispositivo atual pode chamar ({count} selecionados)',
'addressBookManagement.selectAll': 'Selecionar Todos',
'addressBookManagement.deselectAll': 'Desmarcar Todos',
'addressBookManagement.save': 'Salvar Permissões',
// Address Book Management page - operation messages
'addressBookManagement.aliasSaved': 'Apelido salvo',
main/manager-web/src/i18n/vi.js
+1
View File
@@ -1501,6 +1501,7 @@ export default {
'addressBookManagement.setPermissionDesc': 'Đặt thiết bị nào thiết bị hiện tại có thể gọi ({count} đã chọn)',
'addressBookManagement.selectAll': 'Chọn tất cả',
'addressBookManagement.deselectAll': 'Bỏ chọn tất cả',
'addressBookManagement.save': 'Lưu quyền',
// Address Book Management page - operation messages
'addressBookManagement.aliasSaved': 'Bí danh đã lưu',
main/manager-web/src/i18n/zh_CN.js
+1 -1
View File
@@ -1464,7 +1464,7 @@ export default {
'addressBookManagement.addressBookDescPlaceholder': '请输入通讯录描述',
'addressBookManagement.remarksPlaceholder': '请输入备注信息',
'addressBookManagement.selectDevice': '请选择一个设备查看通讯录详情',
'addressBookManagement.save': '保存',
'addressBookManagement.save': '保存权限',
'addressBookManagement.saveSuccess': '保存成功',
'addressBookManagement.saveFailed': '保存失败',
'addressBookManagement.deviceNotSelected': '请先选择一个设备',
main/manager-web/src/i18n/zh_TW.js
+1 -1
View File
@@ -1464,7 +1464,7 @@ export default {
'addressBookManagement.addressBookDescPlaceholder': '請輸入通訊錄描述',
'addressBookManagement.remarksPlaceholder': '請輸入備註信息',
'addressBookManagement.selectDevice': '請選擇一個設備查看通訊錄詳情',
'addressBookManagement.save': '儲存',
'addressBookManagement.save': '保存權限',
'addressBookManagement.saveSuccess': '儲存成功',
'addressBookManagement.saveFailed': '儲存失敗',
'addressBookManagement.deviceNotSelected': '請先選擇一個設備',
main/manager-web/src/views/AddressBookManagement.vue
+240 -182
View File
@@ -22,32 +22,21 @@
</div>
<!-- 智能体列表 -->
<div class="agent-list">
<div
v-for="agent in filteredAgents"
:key="agent.id"
class="agent-item"
>
<div
class="agent-card"
:class="{ active: selectedAgent && selectedAgent.id === agent.id, expanded: expandedAgentId === agent.id }"
@click="handleAgentClick(agent)"
>
<div class="agent-icon">
<i class="el-icon-arrow-right"></i>
</div>
<div class="agent-info">
<div class="agent-name">{{ agent.agentName }} <span class="device-count">({{ agent.deviceCount || 0 }})</span></div>
</div>
</div>
<!-- 设备列表 - 展开时显示在该智能体下方 -->
<div class="device-list" v-if="expandedAgentId === agent.id">
<el-collapse accordion class="agent-collapse" v-model="expandedAgentId">
<el-collapse-item v-for="agent in filteredAgents" :key="agent.id" :name="agent.id">
<template slot="title">
<svg class="agent-triangle" width="8" height="12" viewBox="0 0 10 14" fill="#c8cafb">
<path d="M2 2L8 7L2 12L2 2Z" stroke="#c8cafb" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>
</svg>
<span class="agent-name">{{ agent.agentName }} ({{ agent.deviceCount || 0 }})</span>
</template>
<div class="device-list">
<div
v-for="device in agent.devices"
:key="device.id"
class="device-item"
:class="{ active: selectedDevice && selectedDevice.id === device.id }"
@click="handleDeviceClick(device)"
@click="handleDeviceClick(device, agent)"
>
<div class="device-avatar">
<img :src="getDeviceAvatar(device.id)" alt="avatar" />
@@ -63,8 +52,8 @@
</div>
</div>
</div>
</div>
</div>
</el-collapse-item>
</el-collapse>
</div>
<!-- 右侧通讯录详情 -->
@@ -92,13 +81,16 @@
</div>
<div class="device-mac">{{ $t('addressBookManagement.macAddress') }}：{{ selectedDevice.deviceId }}</div>
<div class="device-status">
{{ $t('addressBookManagement.status') }}：<span :class="selectedDevice.online ? 'online' : 'offline'"><i class="status-dot"></i>{{ selectedDevice.online ? $t('addressBookManagement.online') : $t('addressBookManagement.offline') }}</span>
<span>{{ $t('addressBookManagement.status') }}：</span>
<span :class="selectedDevice.online ? 'online' : 'offline'">
<i class="status-dot"></i>
<span>{{ selectedDevice.online ? $t('addressBookManagement.online') : $t('addressBookManagement.offline') }}</span></span>
</div>
</div>
</div>
<div class="device-stats">
<div class="stat-item">
<i class="el-icon-document"></i>
<i class="el-icon-folder"></i>
<div class="stat-content">
<div class="stat-label">{{ $t('addressBookManagement.deviceGroup') }}</div>
<div class="stat-value-row">
@@ -124,7 +116,7 @@
</div>
</div>
<div class="stat-item">
<i class="el-icon-connection"></i>
<i class="el-icon-link"></i>
<div class="stat-content">
<div class="stat-label">{{ $t('addressBookManagement.lastOnline') }}</div>
<div class="stat-value">{{ getTimeAgo(selectedDevice.lastConnectedAt) }}</div>
@@ -141,10 +133,10 @@
<p class="section-desc">{{ $t('addressBookManagement.setPermissionDesc', { count: selectedPermissions.length }) }}</p>
</div>
<div class="section-actions">
<el-button size="small" @click="handleCancel">{{ $t('common.cancel') }}</el-button>
<el-button size="small" @click="handleToggleSelectAll">
{{ isAllSelected ? $t('addressBookManagement.deselectAll') : $t('addressBookManagement.selectAll') }}
</el-button>
<el-button size="small" @click="handleCancel">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" size="small" @click="handleSavePermissions">{{ $t('addressBookManagement.save') }}</el-button>
</div>
</div>
@@ -155,8 +147,12 @@
:key="device.id"
class="permission-item"
:class="{ active: selectedPermissions.includes(device.id) }"
@click="handlePermissionToggle(device.id)"
>
<el-checkbox
class="permission-checkbox"
:value="selectedPermissions.includes(device.id)"
@change="(checked) => handlePermissionToggle(device.id, checked)"
></el-checkbox>
<div class="permission-avatar">
<img :src="getDeviceAvatar(device.id)" alt="avatar" />
</div>
@@ -183,10 +179,8 @@
</div>
</div>
<div class="empty-detail" v-else>
<i class="el-icon-document-delete empty-icon"></i>
<p>{{ $t('addressBookManagement.selectDevice') }}</p>
</div>
<el-empty :description="$t('addressBookManagement.selectDevice')" v-else>
</el-empty>
</div>
</div>
@@ -351,7 +345,9 @@ export default {
this.selectedDevice = null;
}
},
handleDeviceClick(device) {
handleDeviceClick(device, agent) {
this.expandedAgentId = agent.id;
this.selectedAgent = agent;
this.selectedDevice = device;
// 加载所有设备用于权限选择（排除当前设备）
this.allDevices = this.agentDeviceOptions
@@ -410,12 +406,16 @@ export default {
this.editingDeviceId = null;
this.editingDeviceName = '';
},
handlePermissionToggle(deviceId) {
const index = this.selectedPermissions.indexOf(deviceId);
if (index > -1) {
this.selectedPermissions.splice(index, 1);
handlePermissionToggle(deviceId, checked) {
if (checked) {
if (!this.selectedPermissions.includes(deviceId)) {
this.selectedPermissions.push(deviceId);
}
} else {
this.selectedPermissions.push(deviceId);
const index = this.selectedPermissions.indexOf(deviceId);
if (index > -1) {
this.selectedPermissions.splice(index, 1);
}
}
},
handleToggleSelectAll() {
@@ -590,16 +590,113 @@ export default {
display: flex;
flex: 1;
margin: 20px 22px 0 22px;
gap: 20px;
gap: 8px;
min-height: 0;
}
}
.agent-collapse {
flex: 1;
padding-right: 10px;
padding-left: 20px;
overflow-y: auto;
scrollbar-width: thin;
.agent-name {
font-size: 14px;
font-weight: 500;
color: #686f85;
text-align: left;
}
.device-list {
display: flex;
flex-direction: column;
margin-top: 8px;
.device-item {
padding: 4px 15px;
border-radius: 6px;
margin-bottom: 8px;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid transparent;
display: flex;
align-items: center;
gap: 12px;
background: none;
&:hover {
background: #ebf1fe;
}
&.active {
.device-name {
color: #7297fd !important;
}
border-color: #b3c0fc;
background: #ebf1fe;
}
.device-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.device-content {
flex: 1;
min-width: 0;
.device-name {
font-size: 14px;
color: #686f85;
text-align: left;
line-height: 16px;
// margin-bottom: 4px;
}
}
.device-row {
display: flex;
justify-content: space-between;
align-items: center;
.device-id {
font-size: 12px;
line-height: 16px;
color: #909399;
}
.device-status {
font-size: 12px;
line-height: 16px;
padding: 2px 8px;
border-radius: 4px;
&.online {
color: #4fbe80;
}
&.offline {
color: #9ea3b0;
}
}
}
}
}
}
.left-panel {
width: 20%;
width: 19%;
background: white;
border-radius: 15px;
padding: 20px;
padding: 20px 0;
display: flex;
flex-direction: column;
min-height: 0;
@@ -662,16 +759,17 @@ export default {
margin-bottom: 6px;
.device-name-text {
line-height: 34px;
font-size: 24px;
font-weight: 600;
color: #303133;
color: #3d4566;
cursor: pointer;
}
.alias-input {
height: 28px;
font-size: 24px;
font-weight: 600;
color: #303133;
color: #3d4566;
border: 1px solid #6b8cff;
border-radius: 4px;
padding: 2px 8px;
@@ -692,27 +790,32 @@ export default {
.device-mac {
font-size: 12px;
color: #606266;
color: #686f85;
margin-bottom: 4px;
text-align: left;
}
.device-status {
display: flex;
margin-top: 4px;
font-size: 12px;
color: #606266;
color: #686f85;
text-align: left;
.online {
color: #52c41a;
margin-left: 4px;
color: #686f85;
display: inline-flex;
align-items: center;
gap: 4px;
.status-dot {
width: 8px;
height: 8px;
margin-top: -3px;
margin-right: 4px;
width: 9px;
height: 9px;
border-radius: 50%;
background: #52c41a;
background: #4eb36c;
}
}
@@ -723,8 +826,10 @@ export default {
gap: 4px;
.status-dot {
width: 8px;
height: 8px;
margin-top: -3px;
margin-right: 4px;
width: 9px;
height: 9px;
border-radius: 50%;
background: #999;
}
@@ -744,9 +849,9 @@ export default {
align-items: center;
gap: 10px;
padding: 12px 15px;
background: #f5f7fa;
border-radius: 8px;
min-width: 140px;
border: 1px solid #eaedf4;
i {
font-size: 28px;
@@ -765,7 +870,7 @@ export default {
.stat-value {
font-size: 14px;
color: #303133;
color: #3d4566;
font-weight: 500;
}
@@ -790,7 +895,7 @@ export default {
.stat-edit-input {
font-size: 14px;
color: #303133;
color: #3d4566;
font-weight: 500;
border: 1px solid #6b8cff;
border-radius: 4px;
@@ -821,10 +926,10 @@ export default {
text-align: left;
h3 {
font-size: 16px;
font-weight: 600;
color: #303133;
margin: 0 0 4px 0;
font-size: 24px;
font-weight: 500;
color: #3d4566;
margin: 0 0 10px 0;
}
.section-desc {
@@ -843,7 +948,8 @@ export default {
.permission-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));
gap: 12px;
overflow-y: auto;
flex: 1;
@@ -851,25 +957,51 @@ export default {
.permission-item {
padding: 12px;
background: #f5f7fa;
background: linear-gradient(135deg, #f8fafd 0%, #ffffff 100%);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
border: 2px solid #eaedf4;
display: flex;
align-items: center;
gap: 10px;
position: relative;
&:hover {
background: #e6f0ff;
}
&.active {
border-color: #6b8cff;
background: #e6f0ff;
border-color: #c6d1fd;
.permission-name {
color: #6b8cff;
color: #3765f8;
}
}
.permission-checkbox {
position: absolute;
top: 8px;
right: 8px;
::v-deep(.el-checkbox__inner) {
width: 16px;
height: 16px;
border-radius: 4px;
border-color: #dcdfe6;
background-color: #ffffff;
&::after {
width: 4px;
height: 8px;
left: 5px;
top: 2px;
}
}
::v-deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
background-color: #3765f8;
border-color: #3765f8;
}
::v-deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
color: #3765f8;
}
}
@@ -894,17 +1026,18 @@ export default {
.permission-name {
font-size: 14px;
color: #303133;
color: #3d4566;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.permission-name-row {
line-height: 22px;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
margin-bottom: 4px;
.permission-name {
flex: 1;
@@ -912,6 +1045,7 @@ export default {
}
.permission-edit-btn {
margin-right: 24px;
font-size: 14px;
color: #909399;
cursor: pointer;
@@ -947,29 +1081,30 @@ export default {
.permission-edit-input {
font-size: 14px;
color: #303133;
color: #3d4566;
border: 1px solid #6b8cff;
border-radius: 4px;
padding: 2px 6px;
outline: none;
width: 80px;
width: calc(100% - 40px);
}
.left-header {
margin-bottom: 20px;
text-align: left;
padding: 0 20px;
}
.main-title {
font-size: 28px;
font-weight: 600;
color: #303133;
font-size: 24px;
font-weight: 500;
color: #3d4566;
margin: 0 0 8px 0;
}
.sub-title {
font-size: 14px;
color: #909399;
color: #a6aebe;
margin: 0;
}
@@ -977,6 +1112,12 @@ export default {
display: flex;
gap: 10px;
margin-bottom: 15px;
padding: 0 20px;
}
.agent-triangle {
margin-right: 8px;
flex-shrink: 0;
}
.search-input {
@@ -984,31 +1125,17 @@ export default {
}
.btn-search {
padding: 10px 20px;
background: linear-gradient(135deg, #6b8cff, #a966ff);
border: none;
color: white;
width: 80px;
}
.agent-list {
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
flex: 1;
min-height: 0;
padding-right: 5px;
}
.agent-item {
display: flex;
flex-direction: column;
}
.agent-card {
width: 100%;
padding: 12px 15px;
background: #f5f7fa;
padding: 12px 0px;
// background: #f5f7fa;
border-radius: 8px;
cursor: pointer;
display: flex;
@@ -1033,7 +1160,7 @@ export default {
display: flex;
align-items: center;
justify-content: center;
color: #606266;
color: #686f85;
transition: transform 0.3s ease;
i {
@@ -1051,7 +1178,7 @@ export default {
.agent-name {
font-size: 14px;
font-weight: 600;
color: #303133;
color: #3d4566;
text-align: left;
}
@@ -1062,91 +1189,6 @@ export default {
}
}
.device-list {
display: flex;
flex-direction: column;
padding-left: 20px;
margin-top: 8px;
}
.device-item {
padding: 10px 15px;
background: #f5f7fa;
border-radius: 8px;
margin-bottom: 8px;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
display: flex;
align-items: center;
gap: 12px;
&:hover {
background: #e6f0ff;
}
&.active {
.device-name {
color: #6b8cff;
}
border-color: #6b8cff;
background: #e6f0ff;
}
.device-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.device-content {
flex: 1;
min-width: 0;
}
.device-name {
font-size: 14px;
color: #606266;
text-align: left;
margin-bottom: 4px;
}
.device-row {
display: flex;
justify-content: space-between;
align-items: center;
.device-id {
font-size: 12px;
color: #909399;
}
.device-status {
font-size: 12px;
padding: 2px 8px;
border-radius: 4px;
&.online {
background: #e6f7ff;
color: #52c41a;
}
&.offline {
background: #f5f5f5;
color: #999;
}
}
}
}
.right-panel {
width: 75%;
background: white;
@@ -1192,10 +1234,26 @@ export default {
}
::v-deep(.el-input__inner) {
border-radius: 4px;
height: 36px;
border-radius: 6px;
}
::v-deep(.el-textarea__inner) {
border-radius: 4px;
}
::v-deep(.el-collapse) {
border: none !important;
}
::v-deep(.el-collapse-item__header) {
border: none !important;
}
::v-deep(.el-collapse-item__wrap) {
border: none !important;
}
::v-deep(.el-collapse-item__content) {
padding-bottom: 0 !important;
}
::v-deep(.el-empty) {
height: 100%;
}
</style>