🔱: [client] sync upgrade with 2 commits [trident-sync]

perf: 优化editorwang示例

packages/ui/certd-client/src/views/crud/component/editor/crud.tsx

@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { utils, dict, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, UserPageQuery, UserPageRes, EditReq, DelReq, AddReq, ScopeContext } from "@fast-crud/fast-crud";
 import { FsUploaderFormOptions } from "@fast-crud/fast-extends";
-
+import "./editor.css";
 export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
@@ -79,6 +79,11 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
             show: false
           },
           type: "editor-wang5", // 富文本图片上传依赖file-uploader，请先配置好file-uploader
+          viewForm: {
+            render({ value }) {
+              return <div class={"editor-content-view"} v-html={value}></div>;
+            }
+          },
           form: {
             helper: "示例已升级到wangEditor5版本，原来的editor-wang目前仍然可以使用，后续fs升级可能会将其删除，请尽快升级到editor-wang5版本",
             col: { span: 24 },

packages/ui/certd-client/src/views/crud/component/editor/editor.css

@@ -0,0 +1,52 @@
+.editor-content-view {
+    /*border: 1px solid #ccc;*/
+    /*border-radius: 5px;*/
+    padding: 0 10px;
+    margin-top: 20px;
+    overflow-x: auto;
+}
+
+.editor-content-view p,
+.editor-content-view li {
+    white-space: pre-wrap; /* 保留空格 */
+}
+
+.editor-content-view blockquote {
+    border-left: 8px solid #d0e5f2;
+    padding: 10px 10px;
+    margin: 10px 0;
+    background-color: #f1f1f1;
+}
+
+.editor-content-view code {
+    font-family: monospace;
+    background-color: #eee;
+    padding: 3px;
+    border-radius: 3px;
+}
+.editor-content-view pre>code {
+    display: block;
+    padding: 10px;
+}
+
+.editor-content-view table {
+    border-collapse: collapse;
+}
+.editor-content-view td,
+.editor-content-view th {
+    border: 1px solid #ccc;
+    min-width: 50px;
+    height: 20px;
+}
+.editor-content-view th {
+    background-color: #f1f1f1;
+}
+
+.editor-content-view ul,
+.editor-content-view ol {
+    padding-left: 20px;
+}
+
+.editor-content-view input[type="checkbox"] {
+    margin-right: 5px;
+}