diff --git a/electron.vite.config.ts b/electron.vite.config.ts
index 9ee1f3e..77601dd 100644
--- a/electron.vite.config.ts
+++ b/electron.vite.config.ts
@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-07-02 13:17:44
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-07-03 10:00:13
+ * @LastEditTime: 2025-07-03 17:51:36
  * @FilePath: \electron-project\Robot-Al\Robot-Al-Platform-Web\electron.vite.config.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEmpo
  */
@@ -37,9 +37,6 @@ export default defineConfig({
           enabled: true
         },
         resolvers: [ElementPlusResolver()]
-      }),
-      Components({
-        resolvers: [ElementPlusResolver()]
       })
     ],
     build: {
diff --git a/package-lock.json b/package-lock.json
index d6c86a0..32c2e2d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,6 +41,7 @@
         "unplugin-auto-import": "^19.3.0",
         "unplugin-vue-components": "^28.8.0",
         "vite": "^5.0.12",
+        "vite-plugin-sass": "^0.1.0",
         "vue": "^3.4.15",
         "vue-tsc": "^1.8.27"
       }
@@ -8637,6 +8638,12 @@
         }
       }
     },
+    "node_modules/vite-plugin-sass": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmmirror.com/vite-plugin-sass/-/vite-plugin-sass-0.1.0.tgz",
+      "integrity": "sha512-gLwvs3ozfDAOZCqs+PepkTd4078m8tfq50IlmTW/OphlWsW95uP7lQ5A3NezfUfTZDTCOA4nFlYnOWRpsKYOqw==",
+      "dev": true
+    },
     "node_modules/vue": {
       "version": "3.5.17",
       "resolved": "https://registry.npmmirror.com/vue/-/vue-3.5.17.tgz",
diff --git a/package.json b/package.json
index f04f099..e044f9c 100644
--- a/package.json
+++ b/package.json
@@ -86,6 +86,7 @@
     "unplugin-auto-import": "^19.3.0",
     "unplugin-vue-components": "^28.8.0",
     "vite": "^5.0.12",
+    "vite-plugin-sass": "^0.1.0",
     "vue": "^3.4.15",
     "vue-tsc": "^1.8.27"
   }
diff --git a/src/renderer/src/components/Theme/themeSwitcher.vue b/src/renderer/src/components/Theme/themeSwitcher.vue
new file mode 100644
index 0000000..4eee45d
--- /dev/null
+++ b/src/renderer/src/components/Theme/themeSwitcher.vue
@@ -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>
diff --git a/src/renderer/src/main.ts b/src/renderer/src/main.ts
index ebfcfcd..186dbdc 100644
--- a/src/renderer/src/main.ts
+++ b/src/renderer/src/main.ts
@@ -2,24 +2,25 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-07-02 13:17:44
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-07-03 09:54:52
+ * @LastEditTime: 2025-07-03 17:18:59
  * @FilePath: \electron-project\Robot-Al\Robot-Al-Platform-Web\src\renderer\src\main.ts
  * @Description: 入口文件
  */
-import ElementPlus from "element-plus";
-// import "@/styles/tailwind.scss";
-import "element-plus/dist/index.css";
-import "element-plus/theme-chalk/dark/css-vars.css"; // 暗黑主题
-import "./styles/tailwind.scss";
-import "./styles/main.scss"
+import ElementPlus from 'element-plus'
+import './styles/tailwind.scss'
+import './styles/main.scss'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from '@router'
 import { createPinia } from 'pinia'
-import zhCn from "@/plugins/zhCnElement"; // 引入中文语言包
+import zhCn from '@/plugins/zhCnElement' // 引入中文语言包
 
-createApp(App).use(router).use(createPinia()).use(ElementPlus, {
+createApp(App)
+  .use(router)
+  .use(createPinia())
+  .use(ElementPlus, {
     locale: zhCn,
-    size: "large", // 全局组件尺寸
-    zIndex: 3000, // 全局z-index
-  }).mount('#app')
+    size: 'large', // 全局组件尺寸
+    zIndex: 3000 // 全局z-index
+  })
+  .mount('#app')
diff --git a/src/renderer/src/styles/element-plus.scss b/src/renderer/src/styles/element-plus.scss
new file mode 100644
index 0000000..3aed81c
--- /dev/null
+++ b/src/renderer/src/styles/element-plus.scss
@@ -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);
+  }
+}
diff --git a/src/renderer/src/styles/global.scss b/src/renderer/src/styles/global.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/renderer/src/styles/main.scss b/src/renderer/src/styles/main.scss
index 040355e..964cd92 100644
--- a/src/renderer/src/styles/main.scss
+++ b/src/renderer/src/styles/main.scss
@@ -1,3 +1,4 @@
+@import url("./global.scss");
 @import url("./base.scss");
-
+@import url("./element-plus.scss");
 @import url("./design.scss");
\ No newline at end of file
diff --git a/src/renderer/src/views/Design/Controls/headCtrl.vue b/src/renderer/src/views/Design/Controls/headCtrl.vue
index 5409994..e632aeb 100644
--- a/src/renderer/src/views/Design/Controls/headCtrl.vue
+++ b/src/renderer/src/views/Design/Controls/headCtrl.vue
@@ -19,7 +19,7 @@
               </el-dropdown-menu>
             </template>
           </el-dropdown>
-          <span>设置</span>
+          <span @click="() => emit('setting')">设置</span>
           <el-dropdown placement="bottom-start" trigger="click">
             <span class="el-dropdown-link">工具</span>
             <template #dropdown>
@@ -54,6 +54,12 @@
   </div>
 </template>
 <script lang="ts" setup>
+
+interface Emits {
+  (e: "setting"): void;
+}
+const emit = defineEmits<Emits>();
+
 const dragging = ref(false)
 const mouseX = ref(0)
 const mouseY = ref(0)
diff --git a/src/renderer/src/views/Design/Settings/setPermissions.vue b/src/renderer/src/views/Design/Settings/setPermissions.vue
deleted file mode 100644
index 4c3c668..0000000
--- a/src/renderer/src/views/Design/Settings/setPermissions.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/src/renderer/src/views/Design/Settings/settingList.scss b/src/renderer/src/views/Design/Settings/settingList.scss
new file mode 100644
index 0000000..4bb95f1
--- /dev/null
+++ b/src/renderer/src/views/Design/Settings/settingList.scss
@@ -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;
+}
+}
\ No newline at end of file
diff --git a/src/renderer/src/views/Design/Settings/settingList.vue b/src/renderer/src/views/Design/Settings/settingList.vue
new file mode 100644
index 0000000..6c1e440
--- /dev/null
+++ b/src/renderer/src/views/Design/Settings/settingList.vue
@@ -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>
diff --git a/src/renderer/src/views/Design/index.vue b/src/renderer/src/views/Design/index.vue
index 6328006..c999093 100644
--- a/src/renderer/src/views/Design/index.vue
+++ b/src/renderer/src/views/Design/index.vue
@@ -2,14 +2,14 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-07-02 16:17:29
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-07-03 13:49:21
+ * @LastEditTime: 2025-07-03 14:19:48
  * @FilePath: \electron-project\Robot-Al\Robot-Al-Platform-Web\src\renderer\src\views\Design\index.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
   <div class="design-wrap">
     <div class="design-header">
-      <HeadCtrl />
+      <HeadCtrl @setting="() =>  isOpenSetting = true" />
       <NavCtrl />
     </div>
     <div class="flex design-content">
@@ -25,6 +25,8 @@
       </div>
     </div>
   </div>
+  <!-- 弹窗 -->
+  <SettingList />
 </template>
 
 <script setup lang="ts">
@@ -34,6 +36,6 @@ import PanelCtrl from './Controls/panelCtrl.vue'
 import LogicFlowView from './Workflow/logicFlowView.vue'
 import OutputView from './Workflow/outputView.vue'
 import ResultsView from './Workflow/resultsView.vue'
-
-const count = ref(0)
+import SettingList from './Settings/settingList.vue'
+const isOpenSetting = ref<boolean>(false)
 </script>