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("./base.scss");
|
||||||
|
@import url("./element-plus.scss");
|
||||||
@import url("./design.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