SOURCE

new Vue({
    el: '#app',
    data() {
        return {
            webofficeInstance: null,
            config: {
                "officeType": "docx",
                "appId": "e13d6cf1fad141eaa08266bc5b74e141",
                "fileId": "35000",
                "signature": {
                "sign": "64d78d6fa5e5a06b78e2d3ce4a6f73138153b485",
                "nonce": "3246",
                "timeStamp": "1724759329969"
                },
                "endpoint": "https://test-cmp-doc.woa.com",
                "fileToken": "79774",
                "mode": "normal"
            },
            fileId: "35000",
            activeName: 'first' // 默认激活第一个标签页
        };
    },
    methods: {
        // 加载文档
        updateConfigFromJson() {
            try {
                const parsedConfig = JSON.parse(this.jsonConfig);
                if (typeof parsedConfig === "object" && parsedConfig !== null) {
                    this.config = { ...this.config, ...parsedConfig };
                    this.updateWps();
                } else {
                    alert("请输入有效的JSON格式配置");
                }
            } catch (error) {
                console.log(error, "JDK");
            }
        },
        async updateWps() {
            // 销毁已存在的WebOffice实例
            if (window.webofficeInstance && webofficeInstance.destroy) {
                webofficeInstance.destroy();
                webofficeInstance = null; // 销毁后清空引用
            }
            const iframeElement = document.getElementById("wpshtml");
            let mergedConfigs = {
                ...this.config,
                mount: iframeElement,
            };
            // console.log(mergedConfigs, "mergedConfigs1");
            // 初始化新的WebOffice实例
            window.webofficeInstance = TencentDocsSDK.init(mergedConfigs);
            await webofficeInstance.ready();
        },
        async getContentRange() {
            const contentControls = await webofficeInstance.Application.getActiveDocument().getContentControls();
            if (contentControls[0]) {
                console.log('result:getId', contentControls[0].getId());
                console.log('result:getRange', await contentControls[0].getRange());
                console.log('result:getContent', await contentControls[0].getContent()); 
            }
        },
        async getBookmarksRange() {
            const bookmarks = await webofficeInstance.Application.getActiveDocument().getBookmarks();
            if (bookmarks[0]) {
                console.log('result:getId', bookmarks[0].getId());
                console.log('result:getName', bookmarks[0].getName()); 
                console.log('result:getRange', await bookmarks[0].getRange());
            }
        },
    },

    computed: {
        jsonConfig: {
            get() {
                return JSON.stringify(this.config);
            },
            set(value) {
                try {
                    const parsedConfig = JSON.parse(value);
                    this.config = { ...this.config, ...parsedConfig };
                } catch (error) {
                    console.error("Failed to parse JSON:", error);
                }
            },
        },
    },
})

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js">

</script>

<style>
    .ai-content-box { 
       font-size:12px;
       padding: 5px;
       color:#333;
     }
     .result-container {
        background: #f9f9f9;
        padding:10px;
     }
    .tip-text { 
        color:#6B6D71;
        margin-bottom:10px; 
     }
     .stats-group {
     }
     .stat-item {
        display:flex;
        justify-content: space-between;
        margin: 5px 0px;
     }
     .text-blue {
        color: blue;
        padding: 0 2px;
     }
     .text-green {
        color: green;
        padding: 0 2px;
     }
     .text-red {
        color: red;
        padding: 0 2px;
     }

</style>
<div id="app">
	<div style="width: 320px;height:800px; background:#fff;">
		<el-tabs v-model="activeName" @tab-click="handleTabClick">
			<el-tab-pane label="精准匹配" name="first">
				<transition name="fade">
					<div class="ai-content-box">
                        <!-- 温馨提示 -->
                        <div class="tip-text">温馨提示：文本比对结果仅作为审核审批参考</div>

                        <!-- 统计区块 -->
						<div class="result-container">
							<div class="stats-group">
								<!-- 单个统计项 -->
								<div class="stat-item">
									<div class="stat-title">关键字合计</div>
									<div class="stat-value"><span class="text-blue">3</span>项</div>
								</div>

								<div class="stat-item">
									<div class="stat-title">完全匹配关键字合计</div>
									<div class="stat-value"><span class="text-green">3</span>项</div>
								</div>

								<div class="stat-item no-border">
									<div class="stat-title">不匹配关键字合计</div>
										<div class="stat-value"><span class="text-red">0</span>项</div>
								</div>
							</div>
						</div>
					</div>
				</transition>
			</el-tab-pane>

			<el-tab-pane label="模糊匹配" name="second">
				<transition name="fade">
					<div class="ai-content-box">这里是产品介绍</div>
				</transition>
			</el-tab-pane>

			<el-tab-pane label="AI风险提示" name="third">
				<transition name="fade">
					<div class="ai-content-box">这里是关于我们</div>
				</transition>
			</el-tab-pane>
		</el-tabs>
	</div>
</div>