feat: 新增账号设置组件

src/renderer/components/TitleSection/index.vue

@@ -1,14 +1,25 @@
 <template>
     <div class="box-border border-b-[1px] border-b-[#E5E8EE] mb-[20px] pb-[20px]">
         <span class="text-[24px] font-500 text-[#171717] leading-[32px] mr-[8px]">
-        评价
+            {{ title }}
         </span>
         <span class="text-[12px] font-400 text-[#99A0AE] leading-[16px]">
-        评价数据智能整理，精准优化服务
+            {{ desc }}
         </span>
     </div>
 </template>
 
-<script></script>
+<script setup lang="ts">
+import { defineProps } from 'vue'
 
-<style></style>
+const props = defineProps({
+    title: {
+        type: String,
+        default: ''
+    },
+    desc: {
+        type: String,
+        default: ''
+    }
+})
+</script>

src/renderer/constant/system-config.ts

@@ -0,0 +1,46 @@
+import { RiUserLine, RiHotelLine, RiHotelBedLine, RiSettingsLine } from '@remixicon/vue'
+
+// 菜单列表申明
+export interface MenuItem {
+    id: number
+    name: string
+    icon: any
+    color: string
+    activeColor: string
+    url: string
+}
+
+export const systemMenus: MenuItem[] = [
+    {
+        id: 1,
+        name: '账号',
+        icon: RiUserLine,
+        color: '#525866',
+        activeColor: '#2B7FFF',
+        url: '/home',
+    },
+    {
+        id: 2,
+        name: '渠道管理',
+        icon: RiHotelLine,
+        color: '#525866',
+        activeColor: '#2B7FFF',
+        url: '/order',
+    },
+    {
+        id: 3,
+        name: '房型管理',
+        icon: RiHotelBedLine,
+        color: '#525866',
+        activeColor: '#2B7FFF',
+        url: '/order',
+    },
+    {
+        id: 4,
+        name: '通用设置',
+        icon: RiSettingsLine,
+        color: '#525866',
+        activeColor: '#2B7FFF',
+        url: '/stock',
+    },
+]

src/renderer/views/rate/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="bg-white box-border w-full h-full rounded-[16px] p-[20px]">
-    <RateTitleSection />
+    <TitleSection title="评价" desc="评价数据智能整理，精准优化服务" />
     <RatePanelSection />
     <RateContentSection />
   </div>
 </template>
 
 <script setup lang="ts" name="Rate">
-import RateTitleSection from './components/RateTitleSection/index.vue'
+import TitleSection from './components/TitleSection/index.vue'
 import RatePanelSection from './components/RatePanelSection/index.vue'
 import RateContentSection from './components/RateContentSection/index.vue'
 </script>

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