From d65668d4bb38005245cb33aca06f26e09e01d298 Mon Sep 17 00:00:00 2001
From: ZiuChen <457353192@qq.com>
Date: Sun, 18 Sep 2022 11:54:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Setting=E9=A1=B5=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                   | 2 +-
 src/global/registerElement.js | 4 ++--
 src/style/cpns/setting.less   | 6 ++++++
 src/style/index.less          | 1 +
 src/views/Setting.vue         | 8 +++++++-
 5 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 src/style/cpns/setting.less

diff --git a/src/App.vue b/src/App.vue
index 2da4bfb..a5ea9c7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app">
     <Main @show-setting="settingShown = true" v-show="!settingShown"></Main>
-    <Setting v-show="settingShown"></Setting>
+    <Setting v-show="settingShown" @back="settingShown = false"></Setting>
   </div>
 </template>
 
diff --git a/src/global/registerElement.js b/src/global/registerElement.js
index 4af980f..71149a1 100644
--- a/src/global/registerElement.js
+++ b/src/global/registerElement.js
@@ -1,9 +1,9 @@
 import 'element-plus/theme-chalk/base.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
 import 'element-plus/theme-chalk/el-overlay.css'
-import { ElButton, ElMessageBox, ElMessage } from 'element-plus'
+import { ElButton, ElMessageBox, ElMessage, ElCard } from 'element-plus'
 
-const components = [ElButton, ElMessageBox, ElMessage]
+const components = [ElButton, ElMessageBox, ElMessage, ElCard]
 
 export default function registerElement(app) {
   components.forEach((c) => {
diff --git a/src/style/cpns/setting.less b/src/style/cpns/setting.less
new file mode 100644
index 0000000..3bd4424
--- /dev/null
+++ b/src/style/cpns/setting.less
@@ -0,0 +1,6 @@
+.setting-card {
+  margin: 10px;
+  &-content {
+    padding: 10px;
+  }
+}
diff --git a/src/style/index.less b/src/style/index.less
index adb2559..85c7166 100644
--- a/src/style/index.less
+++ b/src/style/index.less
@@ -8,6 +8,7 @@
   @import (multiple) './cpns/clip-switch.less';
   @import (multiple) './cpns/clip-word-break.less';
   @import (multiple) './cpns/file-list.less';
+  @import (multiple) './cpns/setting.less';
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/src/views/Setting.vue b/src/views/Setting.vue
index a86140e..0eff4b4 100644
--- a/src/views/Setting.vue
+++ b/src/views/Setting.vue
@@ -1,11 +1,17 @@
 <template>
   <div class="setting">
-    <el-button>Setting</el-button>
+    <el-card class="setting-card">
+      <template #header> 设置 </template>
+      <div class="setting-card-content"></div>
+      <el-button @click="emit('back')">返回</el-button>
+      <el-button type="primary">保存</el-button>
+    </el-card>
   </div>
 </template>
 
 <script setup>
 import { ElButton } from 'element-plus'
+const emit = defineEmits(['back'])
 </script>
 
 <style lang="less" scoped>