feat: add copy operationId function

src/core/components/clickable-operation-id.jsx

@@ -0,0 +1,52 @@
+import React, { Component } from "react"
+import { CopyToClipboard } from "react-copy-to-clipboard"
+import PropTypes from "prop-types"
+
+/**
+ * 可点击复制的 operationId 组件
+ * 点击 operationId 文本即可复制到剪贴板
+ */
+export default class ClickableOperationId extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      copied: false
+    }
+  }
+
+  handleCopy = () => {
+    this.setState({ copied: true })
+    // 2秒后重置状态
+    setTimeout(() => {
+      this.setState({ copied: false })
+    }, 2000)
+  }
+
+  render() {
+    const { operationId, originalOperationId } = this.props
+    const { copied } = this.state
+
+    const idToCopy = originalOperationId || operationId
+
+    if (!idToCopy) {
+      return null
+    }
+
+    return (
+      <CopyToClipboard text={idToCopy} onCopy={this.handleCopy}>
+        <span 
+          className={`opblock-summary-operation-id clickable ${copied ? 'copied' : ''}`}
+          title={copied ? "Copied!" : "Click to copy operationId"}
+        >
+          {idToCopy}
+          {copied && <span className="copy-feedback"> ✓</span>}
+        </span>
+      </CopyToClipboard>
+    )
+  }
+
+  static propTypes = {
+    operationId: PropTypes.string,
+    originalOperationId: PropTypes.string,
+  }
+} 

src/core/components/copy-operation-id-btn.jsx

@@ -0,0 +1,35 @@
+import React from "react"
+import { CopyToClipboard } from "react-copy-to-clipboard"
+import PropTypes from "prop-types"
+
+/**
+ * 专门用于复制 operationId 的按钮组件
+ * @param {{ getComponent: func, operationId: string, title?: string }} props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default class CopyOperationIdBtn extends React.Component {
+  render() {
+    let { getComponent, operationId, title = "Copy operationId to clipboard" } = this.props
+
+    if (!operationId) {
+      return null
+    }
+
+    const CopyIcon = getComponent("CopyIcon")
+
+    return (
+      <div className="view-line-link copy-to-clipboard copy-operation-id" title={title}>
+        <CopyToClipboard text={operationId}>
+          <CopyIcon />
+        </CopyToClipboard>
+      </div>
+    )
+  }
+
+  static propTypes = {
+    getComponent: PropTypes.func.isRequired,
+    operationId: PropTypes.string,
+    title: PropTypes.string,
+  }
+} 

src/core/components/operation-summary.jsx

@@ -59,6 +59,8 @@ export default class OperationSummary extends PureComponent {
     const OperationSummaryPath = getComponent("OperationSummaryPath")
     const JumpToPath = getComponent("JumpToPath", true)
     const CopyToClipboardBtn = getComponent("CopyToClipboardBtn", true)
+    const CopyOperationIdBtn = getComponent("CopyOperationIdBtn", true)
+    const ClickableOperationId = getComponent("ClickableOperationId", true)
     const ArrowUpIcon = getComponent("ArrowUpIcon")
     const ArrowDownIcon = getComponent("ArrowDownIcon")
 
@@ -83,9 +85,18 @@ export default class OperationSummary extends PureComponent {
             }
           </div>
 
-          {displayOperationId && (originalOperationId || operationId) ? <span className="opblock-summary-operation-id">{originalOperationId || operationId}</span> : null}
+          {displayOperationId && (originalOperationId || operationId) ? 
+            <ClickableOperationId 
+              operationId={operationId} 
+              originalOperationId={originalOperationId} 
+            /> : null}
         </button>
         <CopyToClipboardBtn textToCopy={`${specPath.get(1)}`} />
+        {displayOperationId && (originalOperationId || operationId) ? 
+          <CopyOperationIdBtn 
+            getComponent={getComponent}
+            operationId={originalOperationId || operationId} 
+          /> : null}
         {
           allowAnonymous ? null :
             <AuthorizeOperationBtn

src/core/presets/base/plugins/core-components/index.js

@@ -47,6 +47,8 @@ import Contact from "core/components/contact"
 import License from "core/components/license"
 import JumpToPath from "core/components/jump-to-path"
 import CopyToClipboardBtn from "core/components/copy-to-clipboard-btn"
+import CopyOperationIdBtn from "core/components/copy-operation-id-btn"
+import ClickableOperationId from "core/components/clickable-operation-id"
 import Footer from "core/components/footer"
 import FilterContainer from "core/containers/filter"
 import ParamBody from "core/components/param-body"
@@ -85,6 +87,8 @@ const CoreComponentsPlugin = () => ({
     License,
     JumpToPath,
     CopyToClipboardBtn,
+    CopyOperationIdBtn,
+    ClickableOperationId,
     onlineValidatorBadge: OnlineValidatorBadge,
     operations: Operations,
     operation: Operation,

src/style/_buttons.scss

@@ -197,3 +197,18 @@ button {
   height: 26px;
   position: unset;
 }
+
+// styles for copy operation id button
+.opblock .opblock-summary .view-line-link.copy-operation-id {
+  height: 26px;
+  position: unset;
+  background: #49cc90; // 使用绿色来区分 operationId 复制按钮
+
+  &:hover {
+    background: #3ea876;
+  }
+
+  &:active {
+    background: #2e8a5f;
+  }
+}

src/style/_layout.scss

@@ -300,6 +300,28 @@
 
   .opblock-summary-operation-id {
     font-size: 14px;
+
+    &.clickable {
+      cursor: pointer;
+      transition: all 0.2s ease;
+      padding: 2px 4px;
+      border-radius: 3px;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+        color: #3b4151;
+      }
+
+      &.copied {
+        background-color: #4caf50;
+        color: white;
+      }
+
+      .copy-feedback {
+        font-size: 12px;
+        margin-left: 4px;
+      }
+    }
   }
 
   .opblock-summary-description {