feat(projects): 添加项目配置拷贝

src/layouts/BasicLayout/components/SettingDrawer/components/ThemeConfig/index.vue

@@ -1,20 +1,58 @@
 <template>
   <n-divider title-placement="center">主题配置</n-divider>
   <n-space vertical>
-    <n-button ref="copyRef" type="primary" :block="true">拷贝当前配置</n-button>
-    <n-button ref="resetRef" type="warning" :block="true">重置当前配置</n-button>
+    <div ref="copyRef" :data-clipboard-text="dataClipboardText">
+      <n-button type="primary" :block="true">拷贝当前配置</n-button>
+    </div>
+    <n-button type="warning" :block="true" @click="handleResetConfig">重置当前配置</n-button>
   </n-space>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { NDivider, NSpace, NButton } from 'naive-ui';
-// import Clipboard from 'clipboard';
-// import { useThemeStore } from '@/store';
+import { ref, onMounted, watch } from 'vue';
+import { NDivider, NSpace, NButton, useDialog, useMessage } from 'naive-ui';
+import Clipboard from 'clipboard';
+import { useThemeStore } from '@/store';
+
+const theme = useThemeStore();
+const { setDefaultThemeStore } = useThemeStore();
+const dialog = useDialog();
+const message = useMessage();
 
-// const theme = useThemeStore();
 const copyRef = ref<HTMLElement | null>(null);
-const resetRef = ref<HTMLElement | null>(null);
+const dataClipboardText = ref(getClipboardText());
+
+function getClipboardText() {
+  return JSON.stringify(theme.$state);
+}
+
+function handleResetConfig() {
+  setDefaultThemeStore();
+  message.success('已重置配置，请重新拷贝！');
+}
+
+function clipboardEventListener() {
+  const copy = new Clipboard(copyRef.value!);
+  copy.on('success', () => {
+    dialog.success({
+      title: '操作成功',
+      content: '复制成功,请替换 src/settings/theme.json的内容！',
+      positiveText: '确定'
+    });
+  });
+}
+
+watch(
+  () => theme.$state,
+  () => {
+    dataClipboardText.value = getClipboardText();
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  clipboardEventListener();
+});
 
 // function handleSuccess() {
 //   window.$dialog?.success({

src/layouts/BasicLayout/components/SettingDrawer/index.vue

@@ -6,6 +6,7 @@
       <system-theme />
       <page-func />
       <page-view />
+      <theme-config />
     </n-drawer-content>
   </n-drawer>
 </template>
@@ -13,7 +14,7 @@
 <script lang="ts" setup>
 import { NDrawer, NDrawerContent } from 'naive-ui';
 import { useAppStore } from '@/store';
-import { DarkMode, NavMode, SystemTheme, PageFunc, PageView } from './components';
+import { DarkMode, NavMode, SystemTheme, PageFunc, PageView, ThemeConfig } from './components';
 
 const app = useAppStore();
 </script>

src/settings/theme.json

@@ -2,110 +2,110 @@
 	"darkMode": false,
 	"themeColor": "#409EFF",
 	"themeColorList": [
-			"#409EFF",
-			"#2d8cf0",
-			"#0960bd",
-			"#009688",
-			"#536dfe",
-			"#ff5c93",
-			"#ee4f12",
-			"#0096c7",
-			"#9c27b0",
-			"#ff9800",
-			"#FF3D68",
-			"#00C1D4",
-			"#71EFA3",
-			"#171010",
-			"#78DEC7",
-			"#1768AC",
-			"#FB9300",
-			"#FC5404"
+		"#409EFF",
+		"#2d8cf0",
+		"#0960bd",
+		"#009688",
+		"#536dfe",
+		"#ff5c93",
+		"#ee4f12",
+		"#0096c7",
+		"#9c27b0",
+		"#ff9800",
+		"#FF3D68",
+		"#00C1D4",
+		"#71EFA3",
+		"#171010",
+		"#78DEC7",
+		"#1768AC",
+		"#FB9300",
+		"#FC5404"
 	],
 	"otherColor": {
-			"info": "#2080f0",
-			"success": "#67C23A",
-			"warning": "#E6A23C",
-			"error": "#F56C6C"
+		"info": "#2080f0",
+		"success": "#67C23A",
+		"warning": "#E6A23C",
+		"error": "#F56C6C"
 	},
 	"navStyle": {
-			"mode": "vertical",
-			"theme": "light"
+		"mode": "vertical",
+		"theme": "light"
 	},
 	"menuStyle": {
-			"width": 200,
-			"collapsedWidth": 64,
-			"mixWidth": 80,
-			"mixCollapsedWidth": 48,
-			"splitMenu": false,
-			"horizontalPosition": "flex-start",
-			"horizontalPositionList": [
-					{
-							"value": "flex-start",
-							"label": "居左"
-					},
-					{
-							"value": "center",
-							"label": "居中"
-					},
-					{
-							"value": "flex-end",
-							"label": "居右"
-					}
-			]
+		"width": 200,
+		"collapsedWidth": 64,
+		"mixWidth": 80,
+		"mixCollapsedWidth": 48,
+		"splitMenu": false,
+		"horizontalPosition": "flex-start",
+		"horizontalPositionList": [
+			{
+				"value": "flex-start",
+				"label": "居左"
+			},
+			{
+				"value": "center",
+				"label": "居中"
+			},
+			{
+				"value": "flex-end",
+				"label": "居右"
+			}
+		]
 	},
 	"headerStyle": {
-			"height": 56,
-			"bgColor": "#fff"
+		"height": 56,
+		"bgColor": "#fff"
 	},
 	"multiTabStyle": {
-			"height": 44,
-			"visible": true,
-			"bgColor": "#fff",
-			"mode": "chrome",
-			"modeList": [
-					{
-							"value": "button",
-							"label": "按钮风格"
-					},
-					{
-							"value": "chrome",
-							"label": "谷歌风格"
-					}
-			]
+		"height": 44,
+		"visible": true,
+		"bgColor": "#fff",
+		"mode": "chrome",
+		"modeList": [
+			{
+				"value": "button",
+				"label": "按钮风格"
+			},
+			{
+				"value": "chrome",
+				"label": "谷歌风格"
+			}
+		]
 	},
 	"crumbsStyle": {
-			"visible": true,
-			"showIcon": false
+		"visible": true,
+		"showIcon": false
 	},
 	"pageStyle": {
-			"animate": true,
-			"animateType": "fade-slide",
-			"animateTypeList": [
-					{
-							"value": "zoom-fade",
-							"label": "渐变"
-					},
-					{
-							"value": "zoom-out",
-							"label": "闪现"
-					},
-					{
-							"value": "fade-slide",
-							"label": "滑动"
-					},
-					{
-							"value": "fade",
-							"label": "消退"
-					},
-					{
-							"value": "fade-bottom",
-							"label": "底部消退"
-					},
-					{
-							"value": "fade-scale",
-							"label": "缩放消退"
-					}
-			]
+		"animate": true,
+		"animateType": "fade-slide",
+		"animateTypeList": [
+			{
+				"value": "zoom-fade",
+				"label": "渐变"
+			},
+			{
+				"value": "zoom-out",
+				"label": "闪现"
+			},
+			{
+				"value": "fade-slide",
+				"label": "滑动"
+			},
+			{
+				"value": "fade",
+				"label": "消退"
+			},
+			{
+				"value": "fade-bottom",
+				"label": "底部消退"
+			},
+			{
+				"value": "fade-scale",
+				"label": "缩放消退"
+			}
+		]
 	},
 	"fixedHeaderAndTab": true,
 	"showReload": true