feat: 新增账号设置组件

src/renderer/views/setting/components/AccountSetting/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="flex-1 h-full p-[20px] select-none">
+    <TitleSection title="账号设置" desc="请关联PMS和渠道房型名称，可使用智能对标" />
+
+    <div
+      class="w-full flex items-center mt-[20px] py-[20px] box-border border-b-[1px] border-dashed border-b-[#E5E8EE]">
+      <div class="label w-[64px] text-[16px] font-medium text-[#171717] mr-[24px]">账号</div>
+      <div class="value text-[14px] font-medium text-[#171717]">1234567890</div>
+    </div>
+
+    <div class="w-full flex items-center py-[20px] box-border border-b-[1px] border-dashed border-b-[#E5E8EE]">
+      <div class="label w-[64px] text-[16px] font-medium text-[#171717] mr-[24px]">登录密码</div>
+      <div class="value text-[14px] text-[#99A0AE]">保障投资者登录操作时使用，上次登录时间：2022-11-09 16:24:30</div>
+
+      <div class="border-[1px] border-[#E5E8EE] rounded-[6px] px-[6px] py-[4px] flex items-center ml-[24px]">
+        <RiCheckboxCircleFill class="w-[16px] h-[16px]" color="#1FC16B" />
+        <span class="text-[12px] text-[#525866] ml-[2px]">已设置</span>
+      </div>
+
+      <el-button type="text" class="ml-auto">修改密码</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RiCheckboxCircleFill } from '@remixicon/vue'
+import TitleSection from '@/components/TitleSection/index.vue'
+
+</script>

src/renderer/views/setting/components/SystemConfig/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <div
+    class="w-[136px] h-full box-border border-r-[1px] border-r-[#E5E8EE] py-[12px] px-[8px] flex flex-col gap-[4px] select-none">
+    <div class="text-[12px] text-[#99A0AE] p-[4px]">系统设置</div>
+
+    <div
+      :class="['box-border flex items-center py-[10px] px-[12px] rounded-[6px] cursor-pointer', item.id === currentId ? 'bg-[#EFF6FF]' : '']"
+      v-for="item in systemMenus" :key="item.id" @click="handleClick(item)">
+      <component :is="item.icon" :color="item.id === currentId ? item.activeColor : item.color"
+        class="w-[20px] h-[20px]" />
+      <span class="box-border px-[8px] text-[14px] font-medium text-[#525866]">{{ item.name }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { systemMenus } from '@/constant/system-config'
+
+const currentId = ref(1)
+
+const handleClick = async (item: any) => {
+  currentId.value = item.id
+}
+</script>

src/renderer/views/setting/index.vue

@@ -1,18 +1,11 @@
 <template>
-  <Layout>
-    <template #task>
-      <Task />
-    </template>
-  </Layout>
+  <div class="bg-white box-border w-full h-full rounded-[16px] flex">
+    <SystemConfig />
+    <AccountSetting />
+  </div>
 </template>
 
 <script setup lang="ts">
-import Task from '../components/Task/index.vue'
-
-const openBaidu = () => {
-  (window as any).ipcAPI?.openBaidu()
-
-    // 发送日志
-    (window as any).ipcAPI?.logToMain('info', '打开百度')
-}
+import SystemConfig from './components/SystemConfig/index.vue'
+import AccountSetting from './components/AccountSetting/index.vue'
 </script>