feat: 新增系统设置页面

src/renderer/constant/channel.ts

@@ -0,0 +1,46 @@
+import pms from '@assets/images/channel/pms.png'
+import xc from '@assets/images/channel/xc.png'
+import qne from '@assets/images/channel/qne.png'
+import fz from '@assets/images/channel/fz.png'
+import mt from '@assets/images/channel/mt.png'
+import dy from '@assets/images/channel/dy.png'
+
+// 菜单列表申明
+interface Item {
+    id: number
+    name: string
+    icon: any
+}
+
+export const channel: Item[] = [
+    {
+        id: 1,
+        name: 'PMS',
+        icon: pms,
+    },
+    {
+        id: 2,
+        name: '携程',
+        icon: xc,
+    },
+    {
+        id: 3,
+        name: '去哪儿',
+        icon: qne,
+    },
+    {
+        id: 4,
+        name: '飞猪',
+        icon: fz,
+    },
+    {
+        id: 5,
+        name: '美团',
+        icon: mt,
+    },
+    {
+        id: 6,
+        name: '抖音',
+        icon: dy,
+    }
+]

src/renderer/constant/system-config.ts

@@ -7,7 +7,7 @@ export interface MenuItem {
     icon: any
     color: string
     activeColor: string
-    url: string
+    componentName: string
 }
 
 export const systemMenus: MenuItem[] = [
@@ -17,7 +17,7 @@ export const systemMenus: MenuItem[] = [
         icon: RiUserLine,
         color: '#525866',
         activeColor: '#2B7FFF',
-        url: '/home',
+        componentName: 'AccountSetting',
     },
     {
         id: 2,
@@ -25,7 +25,7 @@ export const systemMenus: MenuItem[] = [
         icon: RiHotelLine,
         color: '#525866',
         activeColor: '#2B7FFF',
-        url: '/order',
+        componentName: 'ChannelSetting',
     },
     {
         id: 3,
@@ -33,7 +33,7 @@ export const systemMenus: MenuItem[] = [
         icon: RiHotelBedLine,
         color: '#525866',
         activeColor: '#2B7FFF',
-        url: '/order',
+        componentName: 'RoomTypeSetting',
     },
     {
         id: 4,
@@ -41,6 +41,6 @@ export const systemMenus: MenuItem[] = [
         icon: RiSettingsLine,
         color: '#525866',
         activeColor: '#2B7FFF',
-        url: '/stock',
+        componentName: 'Version',
     },
 ]

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

@@ -0,0 +1,36 @@
+<template>
+  <div class="flex-1 h-full p-[20px] select-none">
+    <TitleSection title="渠道管理" desc="绑定酒店使用的相关渠道的账户和密码用于智能操作" />
+
+    <div class="grid grid-cols-3 gap-[12px] mb-[12px] select-none">
+      <div class="border-[1px] border-[#E5E8ED] box-border flex flex-col rounded-[12px] overflow-hidden"
+        v-for="item in channel" :key="item.id">
+        <div class="bg-[#E0E0E0] h-[120px]"></div>
+        <div class="flex items-center relative mt-[-20px] pl-[12px]">
+          <img :src="item.icon" class="w-[40px] h-[40px]">
+        </div>
+        <div class="flex items-center p-[12px]">
+          <span class="text-[14px] font-500 text-[#171717] leading-[20px]">
+            {{ item.name }}
+          </span>
+          <div class="bg-[#F2F5F8] rounded-[6px] flex items-center ml-[8px] py-[4px] px-[6px]">
+            <RiForbidLine class="w-[16px] h-[16px]" color="#717784" />
+            <span class="text-[12px] font-500 text-[#717784] leading-[20px] ml-[4px]">
+              未绑定
+            </span>
+          </div>
+        </div>
+        <div class="p-[12px] border-t-[1px] border-t-[#E5E8ED]">
+          <el-button plain>绑定</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { channel } from '@constant/channel'
+import { RiForbidLine } from '@remixicon/vue'
+import TitleSection from '@/components/TitleSection/index.vue'
+
+</script>

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

@@ -0,0 +1,3 @@
+<template></template>
+
+<script setup lang="ts"></script>

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

@@ -14,12 +14,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, defineEmits } from 'vue'
 import { systemMenus } from '@/constant/system-config'
 
 const currentId = ref(1)
 
+const emits = defineEmits(['change'])
 const handleClick = async (item: any) => {
   currentId.value = item.id
+  emits('change', item)
 }
 </script>

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

@@ -0,0 +1,16 @@
+<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-[16px] font-medium text-[#171717]">1.0.0</div>
+      <el-button type="text" class="ml-auto">检查更新</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import TitleSection from '@/components/TitleSection/index.vue'
+</script>

src/renderer/views/setting/index.vue

@@ -1,11 +1,27 @@
 <template>
   <div class="bg-white box-border w-full h-full rounded-[16px] flex">
-    <SystemConfig />
-    <AccountSetting />
+    <SystemConfig @change=onChange />
+
+    <component :is="currentComponent" />
   </div>
 </template>
 
 <script setup lang="ts">
+import { shallowRef } from 'vue'
 import SystemConfig from './components/SystemConfig/index.vue'
 import AccountSetting from './components/AccountSetting/index.vue'
+import Version from './components/Version/index.vue'
+import ChannelSetting from './components/ChannelSetting/index.vue'
+import RoomTypeSetting from './components/RoomTypeSetting/index.vue'
+
+const currentComponent = shallowRef(AccountSetting)
+const components: any = {
+  AccountSetting,
+  ChannelSetting,
+  RoomTypeSetting,
+  Version,
+}
+const onChange = ({ componentName }: any) => {
+  currentComponent.value = components[componentName]
+}
 </script>