From 389a22dab809cffbe646d96e69c3dfbd4ce2b73d Mon Sep 17 00:00:00 2001
From: GuoJiKun <guojikun486546@163.com>
Date: Fri, 22 Nov 2024 15:13:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0ElementPlus=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.ts            |  1 +
 src/stores/counter.ts  | 12 --------
 src/stores/index.ts    | 17 +++++++++++
 src/views/settings.vue | 66 +++++++++++++++++++++++++++++++++++++-----
 4 files changed, 77 insertions(+), 19 deletions(-)
 delete mode 100644 src/stores/counter.ts
 create mode 100644 src/stores/index.ts

diff --git a/src/main.ts b/src/main.ts
index bf1f928..3c5ad4c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -11,6 +11,7 @@ const naive = create({
 })
 
 import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
 const app = createApp(App)
diff --git a/src/stores/counter.ts b/src/stores/counter.ts
deleted file mode 100644
index 5cdda00..0000000
--- a/src/stores/counter.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-    const count = ref(0)
-    const doubleCount = computed(() => count.value * 2)
-    function increment() {
-        count.value++
-    }
-
-    return { count, doubleCount, increment }
-})
diff --git a/src/stores/index.ts b/src/stores/index.ts
new file mode 100644
index 0000000..afaa717
--- /dev/null
+++ b/src/stores/index.ts
@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+
+interface MainState {
+    audio: Array<string>
+    audioChecked: Array<string>
+    video: Array<string>
+}
+
+export const useMainStore = defineStore('main', {
+    state: (): MainState => {
+        return {
+            audio: [],
+            audioChecked: [],
+            video: [],
+        }
+    },
+})
diff --git a/src/views/settings.vue b/src/views/settings.vue
index ce269bc..e701de8 100644
--- a/src/views/settings.vue
+++ b/src/views/settings.vue
@@ -1,15 +1,67 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const imageList = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'apng']
+const imageChecked = ref([])
+</script>
+
 <template>
-    <div class="about">
+    <div class="setting">
         <h1>This is an settings page</h1>
+        <div class="setting-item support">
+            <h2>支持的格式</h2>
+            <div class="support-item">
+                <div class="support-item-header">
+                    <span>Image-图像</span>
+                </div>
+                <div class="support-item-body">
+                    <el-checkbox-group class="support-item-body-wrap" v-model="imageChecked">
+                        <template v-for="item in imageList" :key="item">
+                            <div class="support-item-body-item">
+                                <el-checkbox :value="item" :label="item" />
+                            </div>
+                        </template>
+                    </el-checkbox-group>
+                </div>
+                <div></div>
+                <div></div>
+            </div>
+        </div>
+        <div class="setting-item">
+            <h2>更新</h2>
+            <div></div>
+        </div>
     </div>
 </template>
 
-<style>
-@media (min-width: 1024px) {
-    .about {
-        min-height: 100vh;
-        display: flex;
-        align-items: center;
+<style lang="scss" scoped>
+.setting {
+    padding: 20px;
+}
+.support {
+    &-item {
+        & + & {
+            margin-bottom: 24px;
+        }
+
+        &-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid #ebeef5;
+            padding: 10px 0;
+        }
+
+        &-body {
+            padding: 10px 24px;
+            .support-item-body-wrap {
+                display: flex;
+                flex-wrap: wrap;
+                .support-item-body-item {
+                    flex: 0 0 100px;
+                }
+            }
+        }
     }
 }
 </style>