feat: 设置弹框开始实现
parent
cedfb63da7
commit
8e01122b3f
@ -0,0 +1,113 @@
|
||||
<!--
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2025-07-03 15:35:41
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2025-07-03 15:39:09
|
||||
* @FilePath: \Robot-Al-Platform-Web\src\renderer\src\components\Theme\themeSwitcher.vue
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
-->
|
||||
<template>
|
||||
<div class="theme-switcher">
|
||||
<h3>选择主题</h3>
|
||||
<el-select v-model="selectedTheme" @change="changeTheme">
|
||||
<el-option
|
||||
v-for="theme in themes"
|
||||
:key="theme.name"
|
||||
:label="theme.name"
|
||||
:value="theme.name"
|
||||
/>
|
||||
</el-select>
|
||||
<h3>自定义颜色</h3>
|
||||
<input type="color" v-model="customColor" @input="changePrimaryColor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const selectedTheme = ref('default')
|
||||
const customColor = ref('#154DDD')
|
||||
const themes = [
|
||||
{
|
||||
name: '默认',
|
||||
colors: {
|
||||
primary: '#154DDD',
|
||||
success: '#67c23a',
|
||||
warning: '#e6a23c',
|
||||
danger: '#f56c6c',
|
||||
info: '#909399'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '深色',
|
||||
colors: {
|
||||
primary: '#2b5876',
|
||||
success: '#3a5045',
|
||||
warning: '#7a4e35',
|
||||
danger: '#6c4843',
|
||||
info: '#5b6064'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '浅色',
|
||||
colors: {
|
||||
primary: '#64b5f6',
|
||||
success: '#a5d6b0',
|
||||
warning: '#f5c588',
|
||||
danger: '#f08475',
|
||||
info: '#b3bec3'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const changeTheme = (themeName) => {
|
||||
const theme = themes.find((t) => t.name === themeName)
|
||||
if (theme) {
|
||||
Object.entries(theme.colors).forEach(([key, value]) => {
|
||||
document.documentElement.style.setProperty(`--el-color-${key}`, value)
|
||||
})
|
||||
selectedTheme.value = themeName
|
||||
}
|
||||
}
|
||||
|
||||
const changePrimaryColor = () => {
|
||||
document.documentElement.style.setProperty('--el-color-primary', customColor.value)
|
||||
}
|
||||
|
||||
return {
|
||||
selectedTheme,
|
||||
customColor,
|
||||
themes,
|
||||
changeTheme,
|
||||
changePrimaryColor
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.theme-switcher {
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 200px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
input[type='color'] {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,15 @@
|
||||
@import url('element-plus/dist/index.css');
|
||||
@import url('element-plus/theme-chalk/dark/css-vars.css'); // 暗黑主题
|
||||
// 重置主题色变量
|
||||
:root {
|
||||
--el-color-primary: #154ddd; // 主色调
|
||||
}
|
||||
|
||||
/* 弹框 */
|
||||
.design-dialog {
|
||||
padding: 0 !important;
|
||||
overflow: hidden;
|
||||
.el-dialog__header {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,4 @@
|
||||
@import url("./global.scss");
|
||||
@import url("./base.scss");
|
||||
|
||||
@import url("./element-plus.scss");
|
||||
@import url("./design.scss");
|
||||
@ -1,13 +0,0 @@
|
||||
<!--
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2025-07-03 11:12:04
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2025-07-03 11:12:10
|
||||
* @FilePath: \electron-project\Robot-Al\Robot-Al-Platform-Web\src\renderer\src\views\Design\Settings\setPermissions.vue
|
||||
* @Description: 设置权限
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<h1>设置权限</h1>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,58 @@
|
||||
.settings-dialog {
|
||||
/* Your dialog styles */
|
||||
|
||||
background-color: #363940 !important;
|
||||
height: 736px;
|
||||
|
||||
.settings-container {
|
||||
display: flex;
|
||||
height: 400px; /* Adjust as needed */
|
||||
}
|
||||
|
||||
.settings-sidebar {
|
||||
width: 200px;
|
||||
background-color: #2d3a4b; /* Dark background */
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.sidebar-item:hover,
|
||||
.sidebar-item.active {
|
||||
background-color: #3c4b64;
|
||||
}
|
||||
|
||||
.sidebar-item .el-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.button-group .el-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,183 @@
|
||||
<!--
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2025-07-03 11:12:04
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2025-07-03 15:38:41
|
||||
* @FilePath: \electron-project\Robot-Al\Robot-Al-Platform-Web\src\renderer\src\views\Design\Settings\setPermissions.vue
|
||||
* @Description: 设置权限
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
title="设置"
|
||||
v-model="dialogVisible"
|
||||
width="800"
|
||||
:close-on-click-modal="false"
|
||||
:destroy-on-close="true"
|
||||
:show-close="true"
|
||||
class="settings-dialog design-dialog"
|
||||
>
|
||||
<div class="settings-container">
|
||||
<div class="settings-sidebar">
|
||||
<div
|
||||
class="sidebar-item"
|
||||
:class="{ active: activeTab === 'permission' }"
|
||||
@click="setActiveTab('permission')"
|
||||
>
|
||||
<el-icon><Setting /></el-icon>
|
||||
权限设置
|
||||
</div>
|
||||
<div
|
||||
class="sidebar-item"
|
||||
:class="{ active: activeTab === 'software' }"
|
||||
@click="setActiveTab('software')"
|
||||
>
|
||||
<el-icon><Edit /></el-icon>
|
||||
软件设置
|
||||
</div>
|
||||
<div
|
||||
class="sidebar-item"
|
||||
:class="{ active: activeTab === 'plan' }"
|
||||
@click="setActiveTab('plan')"
|
||||
>
|
||||
<el-icon><Document /></el-icon>
|
||||
方案设置
|
||||
</div>
|
||||
<div
|
||||
class="sidebar-item"
|
||||
:class="{ active: activeTab === 'strategy' }"
|
||||
@click="setActiveTab('strategy')"
|
||||
>
|
||||
<el-icon><VideoPlay /></el-icon>
|
||||
运行策略
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-content">
|
||||
<div v-if="activeTab === 'permission'">
|
||||
<ThemeSwitcher />
|
||||
<div class="section">
|
||||
<div class="mb-0 section-title">权限导入导出</div>
|
||||
<div class="button-group">
|
||||
<el-button @click="handleImport">导入</el-button>
|
||||
<el-button @click="handleExport">导出</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center section">
|
||||
<div class="section-title">关闭加密</div>
|
||||
<el-switch v-model="closeEncryption" class="pl-[12px]" />
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">修改管理员密码</div>
|
||||
<el-button type="primary" @click="handleChangePassword"> 修改密码 </el-button>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">技术员权限</div>
|
||||
<el-switch v-model="technicianPermission" />
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">技术员密码</div>
|
||||
<el-input
|
||||
v-model="technicianPassword"
|
||||
placeholder="请输入密码"
|
||||
type="password"
|
||||
show-password
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">技术员权限配置</div>
|
||||
<el-button @click="handleTechnicianConfig">配置</el-button>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">操作员权限</div>
|
||||
<el-switch v-model="operatorPermission" />
|
||||
</div>
|
||||
|
||||
<div class="flex section">
|
||||
<div class="section-title">操作员密码</div>
|
||||
<el-input
|
||||
v-model="operatorPassword"
|
||||
placeholder="请输入密码"
|
||||
type="password"
|
||||
show-password
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">操作员使能</div>
|
||||
<el-switch v-model="operatorEnabled" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Add other tabs' content here -->
|
||||
<div v-if="activeTab === 'software'">
|
||||
<p>Software Settings Content</p>
|
||||
</div>
|
||||
<div v-if="activeTab === 'plan'">
|
||||
<p>Plan Settings Content</p>
|
||||
</div>
|
||||
<div v-if="activeTab === 'strategy'">
|
||||
<p>Strategy Settings Content</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="handleConfirm">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ThemeSwitcher from '@/components/Theme/themeSwitcher.vue'
|
||||
const dialogVisible = ref<boolean>(false) // Assuming you have a v-model to control the dialog's visibility
|
||||
const activeTab = ref('permission')
|
||||
|
||||
// Data Bindings
|
||||
const closeEncryption = ref(false)
|
||||
const technicianPermission = ref(false)
|
||||
const technicianPassword = ref('')
|
||||
const operatorPermission = ref(false)
|
||||
const operatorPassword = ref('')
|
||||
const operatorEnabled = ref(true)
|
||||
|
||||
// Methods
|
||||
const setActiveTab = (tab: string) => {
|
||||
activeTab.value = tab
|
||||
}
|
||||
|
||||
const handleImport = () => {
|
||||
console.log('Import')
|
||||
// Implement import logic here
|
||||
}
|
||||
|
||||
const handleExport = () => {
|
||||
console.log('Export')
|
||||
// Implement export logic here
|
||||
}
|
||||
|
||||
const handleChangePassword = () => {
|
||||
console.log('Change Password')
|
||||
// Implement change password logic here
|
||||
}
|
||||
|
||||
const handleTechnicianConfig = () => {
|
||||
console.log('Technician Config')
|
||||
// Implement technician configuration logic here
|
||||
}
|
||||
|
||||
const handleConfirm = () => {
|
||||
console.log('Confirm')
|
||||
// Implement confirm logic here (e.g., save the changes)
|
||||
dialogVisible.value = false // Close the dialog
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url('./settingList.scss');
|
||||
</style>
|
||||
Loading…
Reference in New Issue