1

src/views/jarvis/docSync/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div slot="header" class="clearfix">
+        <span style="font-weight: bold; font-size: 16px;">
+          <i class="el-icon-document"></i> 文档同步配置
+        </span>
+      </div>
+
+      <!-- Tab切换 -->
+      <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
+        <el-tab-pane label="腾讯文档" name="tendoc">
+          <span slot="label">
+            <i class="el-icon-document"></i> 腾讯文档
+          </span>
+          <TencentDocConfig ref="tendocConfig" />
+        </el-tab-pane>
+
+        <el-tab-pane label="WPS365" name="wps365">
+          <span slot="label">
+            <i class="el-icon-document-copy"></i> WPS365
+          </span>
+          <WPS365Config ref="wps365Config" />
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import TencentDocConfig from './components/TencentDocConfig'
+import WPS365Config from './components/WPS365Config'
+
+export default {
+  name: 'DocSync',
+  components: {
+    TencentDocConfig,
+    WPS365Config
+  },
+  data() {
+    return {
+      activeTab: 'tendoc'
+    }
+  },
+  methods: {
+    handleTabClick(tab) {
+      // Tab切换时的处理
+      this.$nextTick(() => {
+        if (tab.name === 'tendoc' && this.$refs.tendocConfig) {
+          this.$refs.tendocConfig.refresh()
+        } else if (tab.name === 'wps365' && this.$refs.wps365Config) {
+          this.$refs.wps365Config.refresh()
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+
+::v-deep .el-tabs__header {
+  margin-bottom: 20px;
+}
+</style>
+