feat: add setting components

src/components/setting/Setting.vue

@@ -0,0 +1,50 @@
+<template>
+  <a-layout-sider class="sider" width="273">
+    <setting-item title="整体风格设置">
+      <div class="theme">
+        <style-item img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" :selected="true"/>
+        <style-item img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" :selected="false"/>
+      </div>
+    </setting-item>
+    <setting-item title="主题色">
+      <div>
+        <theme-color color="rgb(245, 34, 45)" />
+        <theme-color color="rgb(250, 84, 28)" />
+        <theme-color color="rgb(250, 173, 20)" />
+        <theme-color color="rgb(19, 194, 194)" />
+        <theme-color color="rgb(82, 196, 26)" />
+        <theme-color color="rgb(24, 144, 255)" />
+        <theme-color color="rgb(47, 84, 235)" />
+        <theme-color color="rgb(114, 46, 209)" :selected="true" />
+      </div>
+    </setting-item>
+  </a-layout-sider>
+</template>
+
+<script>
+import ALayoutSider from 'ant-design-vue/es/layout/Sider'
+import AIcon from 'ant-design-vue/es/icon/icon'
+import SettingItem from './SettingItem'
+import StyleItem from './StyleItem'
+import ADivider from 'ant-design-vue/es/divider/index'
+import ThemeColor from './ThemeColor'
+export default {
+  name: 'Setting',
+  components: {ThemeColor, ADivider, StyleItem, SettingItem, AIcon, ALayoutSider}
+}
+</script>
+
+<style lang="less" scoped>
+  .sider{
+    background-color: #fff;
+    height: 100%;
+    padding: 24px;
+    font-size: 14px;
+    line-height: 1.5;
+    word-wrap: break-word;
+    position: relative;
+    .theme{
+      display: flex;
+    }
+  }
+</style>