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>