feat: 新增系统设置页面

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>