code-viewport

getrebuild · Nov 30, 2023 · f462eed · f462eed
1 parent bfa0796
commit f462eed
Show file tree

Hide file tree

Showing 9 changed files with 133 additions and 49 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -129,5 +129,7 @@ module.exports = {
     $escapeHtml: true,
     $isLight: true,
     RbGritter: true,
+    $formattedCode: true,
+    CodeViewport: true,
   },
 }
diff --git a/src/main/java/com/rebuild/web/admin/audit/RecycleBinController.java b/src/main/java/com/rebuild/web/admin/audit/RecycleBinController.java
@@ -8,13 +8,16 @@
 package com.rebuild.web.admin.audit;
 
 import cn.devezhao.persist4j.engine.ID;
+import com.rebuild.api.RespBody;
+import com.rebuild.core.Application;
 import com.rebuild.core.service.general.recyclebin.RecycleRestore;
 import com.rebuild.utils.JSONUtils;
 import com.rebuild.web.BaseController;
+import com.rebuild.web.IdParam;
 import lombok.extern.slf4j.Slf4j;
-import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
 import org.springframework.web.servlet.ModelAndView;
 
 import javax.servlet.http.HttpServletRequest;
@@ -27,7 +30,7 @@
  * @since 2019-08-20
  */
 @Slf4j
-@Controller
+@RestController
 @RequestMapping("/admin/audit/")
 public class RecycleBinController extends BaseController {
 
@@ -37,7 +40,7 @@ public ModelAndView page() {
     }
 
     @RequestMapping("recycle-bin/restore")
-    public void dataList(HttpServletRequest request, HttpServletResponse response) {
+    public RespBody dataList(HttpServletRequest request) {
         boolean cascade = getBoolParameter(request, "cascade");
         String ids = getParameterNotNull(request, "ids");
 
@@ -60,9 +63,14 @@ public void dataList(HttpServletRequest request, HttpServletResponse response) {
         }
 
         if (lastError != null && restored == 0) {
-            writeFailure(response, lastError);
-        } else {
-            writeSuccess(response, JSONUtils.toJSONObject("restored", restored));
+            return RespBody.error(lastError);
         }
+        return RespBody.ok(JSONUtils.toJSONObject("restored", restored));
+    }
+
+    @GetMapping("recycle-bin/details")
+    public RespBody details(@IdParam ID id) {
+        Object[] o = Application.getQueryFactory().uniqueNoFilter(id, "recordContent");
+        return RespBody.ok(o[0]);
     }
 }
diff --git a/src/main/resources/web/admin/audit/recycle-bin.html b/src/main/resources/web/admin/audit/recycle-bin.html
@@ -34,6 +34,7 @@
                   </div>
                   <div class="col-12 col-md-6">
                     <div class="dataTables_oper">
+                      <button class="btn btn-space btn-secondary J_details" type="button"><i class="icon mdi mdi-text-box-search-outline"></i> [[${bundle.L('详情')}]]</button>
                       <button class="btn btn-space btn-outline btn-danger J_restore" type="button"><i class="icon zmdi zmdi-time-restore"></i> [[${bundle.L('恢复')}]]</button>
                     </div>
                   </div>
@@ -51,5 +52,8 @@
     <script th:src="@{/assets/js/rb-datalist.common.js}" type="text/babel"></script>
     <script th:src="@{/assets/js/rb-datalist.js}" type="text/babel"></script>
     <script th:src="@{/assets/js/admin/recycle-bin.js}" type="text/babel"></script>
+    <script th:src="@{/assets/lib/prettier/standalone.js}"></script>
+    <script th:src="@{/assets/lib/prettier/parser-babel.js}"></script>
+    <script th:src="@{/assets/lib/clipboard.min.js}"></script>
   </body>
 </html>
diff --git a/src/main/resources/web/admin/integration/apis-manager.html b/src/main/resources/web/admin/integration/apis-manager.html
@@ -35,13 +35,6 @@
       .logs-detail dd {
         color: #222;
       }
-      .code-wrap > pre {
-        background-color: #f5f2f0;
-        color: #905;
-        text-shadow: 0 1px #fff;
-        border-radius: 4px;
-        padding: 15px;
-      }
       .search-logs > input {
         appearance: none !important;
         outline: none !important;
@@ -126,5 +119,6 @@
     <script th:src="@{/assets/js/admin/apis-manager.js}" type="text/babel"></script>
     <script th:src="@{/assets/lib/prettier/standalone.js}"></script>
     <script th:src="@{/assets/lib/prettier/parser-babel.js}"></script>
+    <script th:src="@{/assets/lib/clipboard.min.js}"></script>
   </body>
 </html>
diff --git a/src/main/resources/web/assets/css/rb-page.css b/src/main/resources/web/assets/css/rb-page.css
@@ -5384,3 +5384,28 @@ div.dataTables_wrapper.compact div.dataTables_oper .btn-space {
 .dataTables_oper.invisible2 > .btn.J_view {
   display: inline-block;
 }
+
+.code-viewport {
+  position: relative;
+}
+
+.code-viewport > pre {
+  background-color: #f5f2f0;
+  color: #905;
+  text-shadow: 0 1px #fff;
+  border-radius: 4px;
+  padding: 15px;
+  margin: 0;
+  font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'Liberation Mono', Menlo, Monaco, Consolas, monospace !important;
+}
+
+.code-viewport > a.copy {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  display: none;
+}
+
+.code-viewport:hover > a.copy {
+  display: inline-block;
+}
diff --git a/src/main/resources/web/assets/js/admin/apis-manager.js b/src/main/resources/web/assets/js/admin/apis-manager.js
@@ -231,19 +231,9 @@ class AppLogsViewer extends RbModal {
                   <dt className="col-sm-3">{$L('请求地址')}</dt>
                   <dd className="col-sm-9 text-break">{dataShow[3]}</dd>
                   <dt className="col-sm-12">{$L('请求数据')}</dt>
-                  <dd className="col-sm-12">
-                    <div className="code-wrap">
-                      <pre ref={(c) => (this._$codeReq = c)}>{JSON.stringify(dataShow[4])}</pre>
-                    </div>
-                  </dd>
+                  <dd className="col-sm-12">{dataShow[4] && <CodeViewport code={dataShow[4]} />}</dd>
                   <dt className="col-sm-12">{$L('响应数据')}</dt>
-                  <dd className="col-sm-12 mb-0">
-                    <div className="code-wrap">
-                      <pre className="mb-0" ref={(c) => (this._$codeResp = c)}>
-                        {JSON.stringify(dataShow[5])}
-                      </pre>
-                    </div>
-                  </dd>
+                  <dd className="col-sm-12 mb-0">{dataShow[5] && <CodeViewport code={dataShow[5]} />}</dd>
                 </dl>
               </div>
             ) : (
@@ -265,12 +255,12 @@ class AppLogsViewer extends RbModal {
     this._loadNext()
   }
 
-  componentDidUpdate(prevProps, prevState) {
-    if (this._$codeReq && this._$codeResp && (this.state.dataShow || [])[6] !== (prevState || [])[6]) {
-      this._$codeReq.innerHTML = this._formattedCode(JSON.stringify(this.state.dataShow[4]))
-      this._$codeResp.innerHTML = this._formattedCode(JSON.stringify(this.state.dataShow[5]))
-    }
-  }
+  // componentDidUpdate(prevProps, prevState) {
+  //   if (this._$codeReq && this._$codeResp && (this.state.dataShow || [])[6] !== (prevState || [])[6]) {
+  //     this._$codeReq.innerHTML = $formattedCode(this.state.dataShow[4])
+  //     this._$codeResp.innerHTML = $formattedCode(this.state.dataShow[5])
+  //   }
+  // }
 
   _loadNext(reset, q) {
     if (this.__inLoading) return
@@ -306,19 +296,4 @@ class AppLogsViewer extends RbModal {
     }
     return false
   }
-
-  _formattedCode(c) {
-    try {
-      // eslint-disable-next-line no-undef
-      return prettier.format(c, {
-        parser: 'json',
-        // eslint-disable-next-line no-undef
-        plugins: prettierPlugins,
-        printWidth: 10,
-      })
-    } catch (err) {
-      console.log('Cannot format :', err)
-      return c
-    }
-  }
 }
diff --git a/src/main/resources/web/assets/js/admin/recycle-bin.js b/src/main/resources/web/assets/js/admin/recycle-bin.js
@@ -64,6 +64,7 @@ class DataList extends React.Component {
     this._$recordName = $input
 
     $('.J_restore').on('click', () => this.restore())
+    $('.J_details').on('click', () => this.showDetails())
   }
 
   queryList() {
@@ -93,13 +94,13 @@ class DataList extends React.Component {
     if (!ids || ids.length === 0) return
 
     const alertMsg = (
-      <React.Fragment>
+      <RF>
         <div className="text-bold mb-2">{$L('是否恢复选中的 %d 条记录？', ids.length)}</div>
         <label className="custom-control custom-control-sm custom-checkbox custom-control-inline mb-2">
           <input className="custom-control-input" type="checkbox" />
           <span className="custom-control-label">{$L('同时恢复关联删除的记录 (如有)')}</span>
         </label>
-      </React.Fragment>
+      </RF>
     )
 
     const that = this
@@ -121,6 +122,13 @@ class DataList extends React.Component {
       },
     })
   }
+
+  showDetails() {
+    const ids = this._List.getSelectedIds()
+    if (!ids || ids.length === 0) return
+
+    renderRbcomp(<DlgDetails id={ids[0]} width="681" />)
+  }
 }
 
 const CellRenders_renderSimple = CellRenders.renderSimple
@@ -145,3 +153,17 @@ CellRenders.renderSimple = function (v, s, k) {
 
   return CellRenders_renderSimple(v, s, k)
 }
+
+// ~~ 数据详情
+class DlgDetails extends RbAlert {
+  renderContent() {
+    return this.state.code && <CodeViewport code={this.state.code} />
+  }
+
+  componentDidMount() {
+    $.get(`/admin/audit/recycle-bin/details?id=${this.props.id}`, (res) => {
+      super.componentDidMount()
+      this.setState({ code: res.data })
+    })
+  }
+}
diff --git a/src/main/resources/web/assets/js/rb-components.js b/src/main/resources/web/assets/js/rb-components.js
@@ -1182,6 +1182,41 @@ class RbGritter extends React.Component {
   }
 }
 
+// 代码
+class CodeViewport extends React.Component {
+  render() {
+    return (
+      <div className="code-viewport">
+        <pre ref={(c) => (this._$code = c)}>Loading</pre>
+        {window.ClipboardJS && (
+          <a className="copy" title={$L('复制')} ref={(c) => (this._$copy = c)}>
+            <i className="icon zmdi zmdi-copy" />
+          </a>
+        )}
+      </div>
+    )
+  }
+
+  componentDidMount() {
+    this._$code.innerHTML = $formattedCode(this.props.code || '')
+
+    if (this._$copy) {
+      const that = this
+      const $copy = $(this._$copy).on('mouseenter', () => $(this._$copy).removeClass('copied-check'))
+      // eslint-disable-next-line no-undef
+      new ClipboardJS($copy[0], {
+        text: function () {
+          return $(that._$code).text()
+        },
+      }).on('success', () => $copy.addClass('copied-check'))
+    }
+  }
+
+  UNSAFE_componentWillReceiveProps(newProps) {
+    if (newProps.code) this._$code.innerHTML = $formattedCode(newProps.code)
+  }
+}
+
 /**
  * JSX 组件渲染
  *

diff --git a/src/main/resources/web/assets/js/rb-page.js b/src/main/resources/web/assets/js/rb-page.js
@@ -8,7 +8,7 @@ See LICENSE and COMMERCIAL in the project root for license information.
 /* !!! KEEP IT ES5 COMPATIBLE !!! */
 
 // GA
-(function () {
+;(function () {
   var gaScript = document.createElement('script')
   gaScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-ZCZHJPMEG7'
   gaScript.async = true
@@ -1119,3 +1119,22 @@ var $pages = function (tp, cp) {
   if (end <= tp) pages.push(tp)
   return pages
 }
+
+// 格式化代码
+var $formattedCode = function (c, type) {
+  if (typeof c === 'object') c = JSON.stringify(c)
+  if (!window.prettier) return c
+
+  try {
+    // eslint-disable-next-line no-undef
+    return prettier.format(c, {
+      parser: type || 'json',
+      // eslint-disable-next-line no-undef
+      plugins: prettierPlugins,
+      printWidth: 10,
+    })
+  } catch (err) {
+    console.log('Cannot format code :', err)
+    return c
+  }
+}