feat:初始化工程

src/components/MobileSetting.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="setting-container">
+    <div class="setting-item">
+      <span>主题色</span>
+      <el-color-picker v-model="appStore.themeColor"
+                       @change="changeThemeColorEvent"/>
+    </div>
+
+    <div class="setting-item">
+      <span>模式</span>
+      <el-button circle @click="appStore.toggleDark" class="theme-button">
+        {{ appStore.isDark ? '🌙' : '☀️' }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAppStore } from '@/store/app.ts'
+import { onMounted } from 'vue'
+const appStore = useAppStore()
+
+onMounted(() => {
+  appStore.themeColor = appStore.getThemeColor()
+})
+
+const changeThemeColorEvent = (value: string) => {
+  appStore.setThemeColor(value)
+}
+</script>
+
+<style scoped lang="scss">
+.setting-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .setting-item {
+    display: grid;
+    grid-template-columns: 50px 1fr;
+    align-items: center;
+    gap: 10px;
+  }
+}
+</style>