update: 优化页面主体内容区域适配

This commit is contained in:
zhuoqinglian
2026-03-25 09:26:33 +08:00
parent 3aecb99f70
commit 4d8279d916
19 changed files with 74 additions and 78 deletions
+1 -1
View File
@@ -1,3 +1,3 @@
VUE_APP_TITLE=智控台 VUE_APP_TITLE=智控台
VUE_APP_DESCRIPTION=是由华南理工大学刘思源教授团队研发的智能终端软硬件体系后端服务系统,专为xiaozhi-esp32开源硬件打造,具备多协议兼容、声纹识别、知识库管理等核心能力。 VUE_APP_DESCRIPTION=小智后端服务(xiaozhi-server)是由华南理工大学刘思源教授团队主导研发的智能终端软硬件体系后端服务系统,专为xiaozhi-esp32开源硬件打造,具备多协议兼容、声纹识别、知识库管理等核心能力。
VUE_APP_KEYWORDS=xiaozhi-server,小智服务端,智控台,AI硬件,智能硬件,AI玩具,情感陪伴,聊天机器人,智能家居,车载机器人 VUE_APP_KEYWORDS=xiaozhi-server,小智服务端,智控台,AI硬件,智能硬件,AI玩具,情感陪伴,聊天机器人,智能家居,车载机器人
+5 -6
View File
@@ -28,17 +28,16 @@ nav {
} }
.copyright { .copyright {
text-align: center; padding: 0 !important;
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
margin-top: auto; margin-top: auto;
padding: 30px 0 20px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%; width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
} }
.el-message { .el-message {
@@ -483,11 +483,10 @@ export default {
/* 主容器样式 */ /* 主容器样式 */
.main-wrapper { .main-wrapper {
margin: 5px 22px; // 顶部 63px 底部 35px 查询72px
height: calc(100vh - 63px - 35px - 72px);
margin: 0 22px;
border-radius: 15px; border-radius: 15px;
min-height: calc(100vh - 24vh);
height: auto;
max-height: 80vh;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
background: rgba(237, 242, 255, 0.5); background: rgba(237, 242, 255, 0.5);
@@ -119,7 +119,9 @@
@refresh="fetchBindDevices(currentAgentId)" /> @refresh="fetchBindDevices(currentAgentId)" />
<ManualAddDeviceDialog :visible.sync="manualAddDeviceDialogVisible" :agent-id="currentAgentId" <ManualAddDeviceDialog :visible.sync="manualAddDeviceDialogVisible" :agent-id="currentAgentId"
@refresh="fetchBindDevices(currentAgentId)" /> @refresh="fetchBindDevices(currentAgentId)" />
<el-footer>
<version-footer />
</el-footer>
</div> </div>
</template> </template>
@@ -128,12 +130,14 @@ import Api from '@/apis/api';
import AddDeviceDialog from "@/components/AddDeviceDialog.vue"; import AddDeviceDialog from "@/components/AddDeviceDialog.vue";
import HeaderBar from "@/components/HeaderBar.vue"; import HeaderBar from "@/components/HeaderBar.vue";
import ManualAddDeviceDialog from "@/components/ManualAddDeviceDialog.vue"; import ManualAddDeviceDialog from "@/components/ManualAddDeviceDialog.vue";
import VersionFooter from "@/components/VersionFooter.vue";
export default { export default {
components: { components: {
HeaderBar, HeaderBar,
AddDeviceDialog, AddDeviceDialog,
ManualAddDeviceDialog ManualAddDeviceDialog,
VersionFooter
}, },
data() { data() {
return { return {
@@ -504,11 +508,9 @@ export default {
} }
.main-wrapper { .main-wrapper {
margin: 5px 22px; height: calc(100vh - 63px - 35px - 72px);
margin: 0 22px;
border-radius: 15px; border-radius: 15px;
min-height: calc(100vh - 24vh);
height: auto;
max-height: 80vh;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
background: rgba(237, 242, 255, 0.5); background: rgba(237, 242, 255, 0.5);
@@ -645,7 +647,7 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: 10px; margin-top: 10px;
padding-bottom: 10px; /* padding-bottom: 10px; */
} }
@@ -807,7 +809,7 @@ export default {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: calc(100vh - 40vh); /* max-height: calc(100vh - 40vh); */
} }
:deep(.el-table__body-wrapper) { :deep(.el-table__body-wrapper) {
@@ -461,9 +461,10 @@ export default {
} }
.main-wrapper { .main-wrapper {
margin: 5px 22px; // 顶部 63px 底部 35px 查询72px
height: calc(100vh - 63px - 35px - 72px);
margin: 0 22px;
border-radius: 15px; border-radius: 15px;
height: 80vh;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
background: rgba(237, 242, 255, 0.5); background: rgba(237, 242, 255, 0.5);
@@ -422,11 +422,9 @@ export default {
} }
.main-wrapper { .main-wrapper {
margin: 0 22px 5px 22px; height: calc(100vh - 63px - 35px - 58px);
margin: 0 22px;
border-radius: 15px; border-radius: 15px;
min-height: calc(100vh - 24vh);
height: auto;
max-height: 80vh;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
background: rgba(237, 242, 255, 0.5); background: rgba(237, 242, 255, 0.5);
@@ -472,11 +472,10 @@ export default {
} }
.main-wrapper { .main-wrapper {
margin: 5px 22px; // 顶部 63px 底部 35px 查询72px
height: calc(100vh - 63px - 35px - 72px);
margin: 0 22px;
border-radius: 15px; border-radius: 15px;
min-height: calc(100vh - 24vh);
height: auto;
max-height: 80vh;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
background: rgba(237, 242, 255, 0.5); background: rgba(237, 242, 255, 0.5);
@@ -1127,11 +1127,10 @@ export default {
} }
.main-wrapper { .main-wrapper {
margin: 5px 22px; // 顶部 63px 底部 35px 查询58px
height: calc(100vh - 63px - 35px - 58px);
margin: 0 22px;
border-radius: 15px; border-radius: 15px;
min-height: calc(100vh - 24vh);
height: auto;
max-height: 80vh;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
background: rgba(237, 242, 255, 0.5); background: rgba(237, 242, 255, 0.5);
+3 -3
View File
@@ -660,9 +660,10 @@ export default {
} }
.main-wrapper { .main-wrapper {
margin: 5px 22px; // 顶部 63px 底部 35px 查询72px
height: calc(100vh - 63px - 35px - 72px);
margin: 0 22px;
border-radius: 15px; border-radius: 15px;
height: 80vh;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
background: rgba(237, 242, 255, 0.5); background: rgba(237, 242, 255, 0.5);
@@ -687,7 +688,6 @@ export default {
height: 100%; height: 100%;
border-radius: 15px; border-radius: 15px;
background: transparent; background: transparent;
border: 1px solid #fff;
} }
.nav-panel { .nav-panel {
+3 -4
View File
@@ -422,11 +422,10 @@ export default {
} }
.main-wrapper { .main-wrapper {
margin: 5px 22px; // 顶部 63px 底部 35px 查询72px
height: calc(100vh - 63px - 35px - 72px);
margin: 0 22px;
border-radius: 15px; border-radius: 15px;
min-height: calc(100vh - 24vh);
height: auto;
max-height: 80vh;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
background: rgba(237, 242, 255, 0.5); background: rgba(237, 242, 255, 0.5);
@@ -381,11 +381,10 @@ export default {
} }
.main-wrapper { .main-wrapper {
margin: 5px 22px; // 顶部 63px 底部 35px 查询72px
height: calc(100vh - 63px - 35px - 72px);
margin: 0 22px;
border-radius: 15px; border-radius: 15px;
min-height: calc(100vh - 24vh);
height: auto;
max-height: 80vh;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
background: rgba(237, 242, 255, 0.5); background: rgba(237, 242, 255, 0.5);
@@ -460,11 +460,10 @@ export default {
} }
.main-wrapper { .main-wrapper {
margin: 5px 22px; // 顶部 63px 底部 35px 查询72px
height: calc(100vh - 63px - 35px - 72px);
margin: 0 22px;
border-radius: 15px; border-radius: 15px;
min-height: calc(100vh - 24vh);
height: auto;
max-height: 80vh;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
background: rgba(237, 242, 255, 0.5); background: rgba(237, 242, 255, 0.5);
@@ -189,11 +189,10 @@ export default {
} }
.main-wrapper { .main-wrapper {
margin: 5px 22px; // 顶部 63px 底部 35px 查询58px
height: calc(100vh - 63px - 35px - 58px);
margin: 0 22px;
border-radius: 15px; border-radius: 15px;
min-height: calc(100vh - 24vh);
height: auto;
max-height: 80vh;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
background: rgba(237, 242, 255, 0.5); background: rgba(237, 242, 255, 0.5);
@@ -53,12 +53,16 @@
</div> </div>
</div> </div>
</div> </div>
<el-footer>
<version-footer />
</el-footer>
</div> </div>
</template> </template>
<script> <script>
import HeaderBar from "@/components/HeaderBar.vue"; import HeaderBar from "@/components/HeaderBar.vue";
import agentApi from '@/apis/module/agent'; import agentApi from '@/apis/module/agent';
import VersionFooter from "@/components/VersionFooter.vue";
// 默认模型配置常量 // 默认模型配置常量
const DEFAULT_MODEL_CONFIG = { const DEFAULT_MODEL_CONFIG = {
@@ -73,7 +77,7 @@ const DEFAULT_MODEL_CONFIG = {
export default { export default {
name: 'TemplateQuickConfig', name: 'TemplateQuickConfig',
components: { HeaderBar }, components: { HeaderBar, VersionFooter },
data() { data() {
return { return {
form: { form: {
@@ -276,7 +280,7 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1.5vh 24px; padding: 16px 24px;
} }
.page-title { .page-title {
@@ -286,9 +290,9 @@ export default {
} }
.main-wrapper { .main-wrapper {
margin: 1vh 22px; height: calc(100vh - 63px - 35px - 60px);
margin: 0 22px;
border-radius: 15px; border-radius: 15px;
height: calc(100vh - 24vh);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
background: rgba(237, 242, 255, 0.5); background: rgba(237, 242, 255, 0.5);
@@ -381,11 +381,10 @@ export default {
} }
.main-wrapper { .main-wrapper {
margin: 5px 22px; // 顶部 63px 底部 35px 查询72px
height: calc(100vh - 63px - 35px - 72px);
margin: 0 22px;
border-radius: 15px; border-radius: 15px;
min-height: calc(100vh - 24vh);
height: auto;
max-height: 80vh;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
background: rgba(237, 242, 255, 0.5); background: rgba(237, 242, 255, 0.5);
@@ -511,11 +511,10 @@ export default {
} }
.main-wrapper { .main-wrapper {
margin: 5px 22px; // 顶部 63px 底部 35px 查询72px
height: calc(100vh - 63px - 35px - 72px);
margin: 0 22px;
border-radius: 15px; border-radius: 15px;
min-height: calc(100vh - 24vh);
height: auto;
max-height: 80vh;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
background: rgba(237, 242, 255, 0.5); background: rgba(237, 242, 255, 0.5);
+4 -6
View File
@@ -202,11 +202,9 @@ export default {
} }
.main-wrapper { .main-wrapper {
margin: 5px 22px; height: calc(100vh - 63px - 35px - 60px);
margin: 0 22px;
border-radius: 15px; border-radius: 15px;
min-height: calc(100vh - 24vh);
height: auto;
max-height: 80vh;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
background: rgba(237, 242, 255, 0.5); background: rgba(237, 242, 255, 0.5);
@@ -285,7 +283,7 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: 10px; margin-top: 10px;
padding-bottom: 10px; // padding-bottom: 10px;
} }
.ctrl_btn { .ctrl_btn {
@@ -533,7 +531,7 @@ export default {
} }
.el-table { .el-table {
--table-max-height: calc(100vh - 40vh); // --table-max-height: calc(100vh - 40vh);
max-height: var(--table-max-height); max-height: var(--table-max-height);
.el-table__body-wrapper { .el-table__body-wrapper {
@@ -363,11 +363,10 @@ export default {
} }
.main-wrapper { .main-wrapper {
margin: 5px 22px; // 顶部 63px 底部 35px 查询72px
height: calc(100vh - 63px - 35px - 72px);
margin: 0 22px;
border-radius: 15px; border-radius: 15px;
min-height: calc(100vh - 24vh);
height: auto;
max-height: 80vh;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
background: rgba(237, 242, 255, 0.5); background: rgba(237, 242, 255, 0.5);
+8 -4
View File
@@ -355,6 +355,9 @@
:settings="ttsSettings" :settings="ttsSettings"
@save="handleTtsSettingsSave" @save="handleTtsSettingsSave"
/> />
<el-footer>
<version-footer />
</el-footer>
</div> </div>
</template> </template>
@@ -368,10 +371,11 @@ import TtsAdvancedSettings from "@/components/TtsAdvancedSettings.vue";
import HeaderBar from "@/components/HeaderBar.vue"; import HeaderBar from "@/components/HeaderBar.vue";
import i18n from "@/i18n"; import i18n from "@/i18n";
import featureManager from "@/utils/featureManager"; import featureManager from "@/utils/featureManager";
import VersionFooter from "@/components/VersionFooter.vue";
export default { export default {
name: "RoleConfigPage", name: "RoleConfigPage",
components: { HeaderBar, FunctionDialog, ContextProviderDialog, TtsAdvancedSettings }, components: { HeaderBar, FunctionDialog, ContextProviderDialog, TtsAdvancedSettings, VersionFooter },
data() { data() {
return { return {
showContextProviderDialog: false, showContextProviderDialog: false,
@@ -1291,7 +1295,7 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1.5vh 24px; padding: 16px 24px;
} }
.page-title { .page-title {
@@ -1301,9 +1305,9 @@ export default {
} }
.main-wrapper { .main-wrapper {
margin: 1vh 22px; height: calc(100vh - 63px - 35px - 60px);
margin: 0 22px;
border-radius: 15px; border-radius: 15px;
height: calc(100vh - 24vh);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
background: rgba(237, 242, 255, 0.5); background: rgba(237, 242, 255, 0.5);