feat: 添加通用设置弹窗

src/renderer/components.d.ts

@@ -40,8 +40,11 @@ declare module 'vue' {
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMain: typeof import('element-plus/es')['ElMain']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']

src/renderer/src/store/modules/app.ts

@@ -9,6 +9,8 @@ import { useLocalStorage } from '@vueuse/core'
  * @description: 应用状态管理
  */
 export const useAppStore = defineStore('app', () => {
+  // 显示通用配置
+  const showGeneralModal = ref(false)
   // 屏幕布局
   const screenLayout = ref<'vertical' | 'horizontal'>('vertical')
   // 语言
@@ -25,6 +27,8 @@ export const useAppStore = defineStore('app', () => {
   const showDownload = ref(true)
   // 加载中
   const loading = ref(false)
+  // 联调工具路径
+  const sunmicroPath = useLocalStorage('sunmicroPath', '')
 
   const { locale } = useI18n()
 
@@ -35,6 +39,14 @@ export const useAppStore = defineStore('app', () => {
     lang.value = val
     locale.value = val
   }
+
+  // 设置主题
+  function setTheme(val: 'light' | 'dark') {
+    theme.value = val
+    // 切换html样式
+    document.querySelector('html')?.setAttribute('class', val)
+  }
+
   // 切换布局
   function toggleLayout() {
     screenLayout.value = screenLayout.value === 'vertical' ? 'horizontal' : 'vertical'
@@ -50,6 +62,9 @@ export const useAppStore = defineStore('app', () => {
     loading,
     getLocale,
     setLang,
-    toggleLayout
+    toggleLayout,
+    showGeneralModal,
+    setTheme,
+    sunmicroPath
   }
 })

src/renderer/src/theme/vars.css

@@ -6,7 +6,7 @@
   --text-primary: #cccccc; /* 主要文本 */
   --text-secondary: #858585; /* 次要文本 */
   --text-active: #ffffff; /* 激活文本 */
-  --accent-blue: #569cd6; /* 蓝色强调色 (VS Code blue) */
+  --accent-blue: #409eff; /* 蓝色强调色 (VS Code blue) */
   --accent-green: #6a9955; /* 绿色强调色 (VS Code green) */
   --accent-yellow: #d7ba7d; /* 黄色强调色 (VS Code yellow) */
   --accent-red: #f44747; /* 红色强调色 (VS Code red) */

src/renderer/src/views/designer/modals/settingModal/GeneralSettingModal.vue

@@ -0,0 +1,57 @@
+<template>
+  <el-dialog
+    v-model="appStore.showGeneralModal"
+    title="通用设置"
+    width="440px"
+    :modal="false"
+    :close-on-click-modal="false"
+    align-center
+  >
+    <el-form label-position="top">
+      <el-form-item label="语言">
+        <el-select :model-value="appStore.lang" @change="(val) => appStore.setLang(val)">
+          <el-option label="中文" value="zh_CN"></el-option>
+          <el-option label="English" value="en_US"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="主题">
+        <el-select :model-value="appStore.theme" @change="(val) => appStore.setTheme(val)">
+          <el-option label="暗黑" value="dark"></el-option>
+          <el-option label="亮色" value="light"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="sunmicro.exe路径">
+        <el-input v-model="appStore.sunmicroPath">
+          <template #append>
+            <el-button @click="selectPath"><LuFolder :size="16" /></el-button>
+          </template>
+        </el-input>
+      </el-form-item>
+      <div class="pl-0px">
+        <el-checkbox v-model="appStore.showLink">连接</el-checkbox>
+        <el-checkbox v-model="appStore.showDownload">下载</el-checkbox>
+      </div>
+    </el-form>
+    <template #footer>
+      <el-button type="primary" @click="appStore.showGeneralModal = false">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { useAppStore } from '@/store/modules/app'
+import { LuFolder } from 'vue-icons-plus/lu'
+
+const appStore = useAppStore()
+
+// 选择sunmicro.exe路径
+const selectPath = async () => {
+  const path = await window.electron.ipcRenderer.invoke('get-file')
+
+  if (path) {
+    appStore.sunmicroPath
+  }
+}
+</script>
+
+<style scoped></style>

src/renderer/src/views/designer/sidebar/Hierarchy.vue

@@ -1,6 +1,6 @@
 <template>
   <SplitterCollapse>
-    <SplitterCollapseItem title="屏幕页面">
+    <SplitterCollapseItem title="屏幕页面" :defaultSize="30">
       <!-- 屏幕层 -->
       <el-tree
         ref="treeRef"

src/renderer/src/views/designer/sidebar/index.vue

@@ -28,7 +28,22 @@
       </div>
       <div class="w-full flex flex-col">
         <ul class="list-none p-0 m-0 text-12px text-text-secondary">
-          <li class="sidebar-menu-item"><LuSettings2 /></li>
+          <li class="sidebar-menu-item">
+            <el-popover placement="right" v-model:visible="showPopoverMenu" trigger="click">
+              <template #reference>
+                <span><LuSettings2 /></span>
+              </template>
+              <div class="text-12px" @click="showPopoverMenu = false">
+                <div class="leading-24px px-12px cursor-pointer hover:bg-accent-blue">项目设置</div>
+                <div
+                  class="leading-24px px-12px cursor-pointer hover:bg-accent-blue"
+                  @click="appStore.showGeneralModal = true"
+                >
+                  通用设置
+                </div>
+              </div>
+            </el-popover>
+          </li>
         </ul>
       </div>
     </div>
@@ -53,19 +68,21 @@
       <Schema />
     </div>
   </div>
+  <GeneralSettingModal />
 </template>
 
 <script setup lang="ts">
 import { ref, h } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@/store/modules/app'
 
-import { SplitterCollapse, SplitterCollapseItem } from '@/components/SplitterCollapse'
 import { LuFiles, LuBoxes, LuSettings2, LuInbox, LuCode2 } from 'vue-icons-plus/lu'
 import Hierarchy from './Hierarchy.vue'
 import Libary from './Libary.vue'
 import Schema from './Schema.vue'
 import Resource from './Resource.vue'
 import Method from './Method.vue'
+import GeneralSettingModal from '../modals/settingModal/GeneralSettingModal.vue'
 
 const { t } = useI18n()
 
@@ -98,6 +115,8 @@ const sidebarMenu = [
 ]
 
 const activeMenu = ref('file')
+const appStore = useAppStore()
+const showPopoverMenu = ref(false)
 </script>
 
 <style scoped lang="less">
@@ -106,6 +125,13 @@ const activeMenu = ref('file')
     padding: 0 12px;
     box-sizing: border-box;
   }
+  .el-menu-item {
+    padding: 0;
+    height: 32px;
+  }
+  .el-popper {
+    padding: 4px 12px;
+  }
 }
 .sidebar-menu-item {
   width: 100%;