@opendesign-plus/components 0.0.1-rc.94 → 0.0.1-rc.96

package/dist/treeshaking/components/article/OArticle.vue2.mjs

@@ -1,22 +1,8 @@
-import { defineComponent, useCssVars, computed, openBlock, createElementBlock, normalizeStyle, createElementVNode, toDisplayString, createBlock, unref, withCtx, createTextVNode, createCommentVNode, Fragment, renderList, normalizeClass, createVNode, normalizeProps, guardReactiveProps, renderSlot } from "vue";
-import { OTag, ODivider } from "@opensig/opendesign";
+import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, createElementVNode, normalizeClass, createVNode, mergeProps, withCtx, renderSlot, createBlock } from "vue";
 import _OMarkdown from "../markdown/OMarkdown.vue.mjs";
 import _OArticlePagination from "../article-pagination/OArticlePagination.vue.mjs";
-import { useI18n } from "../../i18n/index.mjs";
-const _hoisted_1 = { class: "o-article__header" };
-const _hoisted_2 = { class: "o-article__title" };
-const _hoisted_3 = {
-  key: 0,
-  class: "o-article__meta"
-};
-const _hoisted_4 = {
-  key: 0,
-  class: "o-article__tags"
-};
-const _hoisted_5 = {
-  key: 1,
-  class: "o-article__update-time"
-};
+import ArticleTitle from "./components/ArticleTitle.vue.mjs";
+import DocTitle from "./components/DocTitle.vue.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "OArticle",
   props: {
@@ -26,39 +12,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     community: {},
     prev: { default: null },
     next: { default: null },
+    type: { default: "article" },
     disableH2: { type: Boolean, default: false },
     disableTable: { type: Boolean, default: false },
     disableImg: { type: Boolean, default: false },
     disableCode: { type: Boolean, default: false },
     updateTime: {},
-    markdownBodyClass: { default: "o-markdown-body" },
-    removeFirstTopMargin: { type: Boolean, default: true },
-    autoHideFirstH1: { type: Boolean, default: true },
+    sourceUrl: {},
+    enableDownload: { type: Boolean, default: false },
+    enableStar: { type: Boolean, default: false },
+    enableCopyLink: { type: Boolean, default: false },
     prevLabel: {},
     nextLabel: {},
-    divider: { type: Boolean, default: true },
     radius: { default: "var(--o-radius-xs)" }
   },
-  emits: ["navigate"],
+  emits: ["navigate", "download", "collect"],
   setup(__props, { emit: __emit }) {
-    useCssVars((_ctx) => ({
-      "v421a9b14": headerBgStyle.value
-    }));
     const props = __props;
     const emit = __emit;
-    const { t } = useI18n();
     const markdownProps = computed(() => ({
-      disableH1: true,
+      hideFirstH1: true,
       disableH2: props.disableH2,
       disableTable: props.disableTable,
       disableImg: props.disableImg,
-      disableCode: props.disableCode,
-      markdownBodyClass: props.markdownBodyClass
+      disableCode: props.disableCode
     }));
     const onNavigate = (type, item) => {
       emit("navigate", type, item);
     };
-    const headerBgStyle = computed(() => props.headerBg ? `url(${props.headerBg})` : "none");
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: "o-article",
@@ -66,66 +47,51 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "--o-article-radius": __props.radius
         })
       }, [
-        createElementVNode("header", _hoisted_1, [
-          createElementVNode("h1", _hoisted_2, toDisplayString(__props.title), 1),
-          __props.tags.length || __props.updateTime || __props.community ? (openBlock(), createElementBlock("div", _hoisted_3, [
-            __props.tags.length || __props.community ? (openBlock(), createElementBlock("div", _hoisted_4, [
-              __props.community ? (openBlock(), createBlock(unref(OTag), {
-                key: 0,
-                class: "o-article__tag",
-                size: "large",
-                variant: "outline",
-                round: __props.community === "MindSpore" ? "pill" : __props.radius
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(__props.community), 1)
-                ]),
-                _: 1
-              }, 8, ["round"])) : createCommentVNode("", true),
-              __props.community && __props.tags.length ? (openBlock(), createBlock(unref(ODivider), {
-                key: 1,
-                direction: "v",
-                class: "o-article__tags-divider"
-              })) : createCommentVNode("", true),
-              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.tags, (tag) => {
-                return openBlock(), createBlock(unref(OTag), {
-                  key: tag,
-                  class: "o-article__tag",
-                  size: "large",
-                  variant: "outline",
-                  round: __props.community === "MindSpore" ? "pill" : __props.radius
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(tag), 1)
-                  ]),
-                  _: 2
-                }, 1032, ["round"]);
-              }), 128))
-            ])) : createCommentVNode("", true),
-            __props.updateTime ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(unref(t)("md.updateTime")) + toDisplayString(__props.updateTime), 1)) : createCommentVNode("", true)
-          ])) : createCommentVNode("", true)
-        ]),
         createElementVNode("div", {
           class: normalizeClass(["o-article__content", {
-            "o-article__content--no-first-margin": __props.removeFirstTopMargin,
-            "o-article__content--hide-first-h1": __props.autoHideFirstH1
+            doc: __props.type === "doc"
           }])
         }, [
-          createVNode(_OMarkdown, normalizeProps(guardReactiveProps(markdownProps.value)), {
+          createVNode(_OMarkdown, mergeProps({ ref: "markdownRef" }, markdownProps.value), {
+            header: withCtx(({ h1 }) => [
+              __props.type === "article" ? (openBlock(), createBlock(ArticleTitle, {
+                key: 0,
+                title: __props.title,
+                el: h1,
+                "header-bg": __props.headerBg,
+                tags: __props.tags,
+                community: __props.community,
+                "update-time": __props.updateTime,
+                radius: __props.radius
+              }, null, 8, ["title", "el", "header-bg", "tags", "community", "update-time", "radius"])) : (openBlock(), createBlock(DocTitle, {
+                key: 1,
+                title: __props.title,
+                el: h1,
+                "bg-image": __props.headerBg,
+                "update-time": __props.updateTime,
+                "source-url": __props.sourceUrl,
+                "enable-download": __props.enableDownload,
+                "enable-star": __props.enableStar,
+                "enable-copy-link": __props.enableCopyLink,
+                onDownload: _cache[0] || (_cache[0] = ($event) => emit("download")),
+                onCollect: _cache[1] || (_cache[1] = ($event) => emit("collect"))
+              }, null, 8, ["title", "el", "bg-image", "update-time", "source-url", "enable-download", "enable-star", "enable-copy-link"]))
+            ]),
+            footer: withCtx(() => [
+              createVNode(_OArticlePagination, {
+                prev: __props.prev,
+                next: __props.next,
+                "prev-label": __props.prevLabel,
+                "next-label": __props.nextLabel,
+                radius: __props.radius,
+                onNavigate
+              }, null, 8, ["prev", "next", "prev-label", "next-label", "radius"])
+            ]),
             default: withCtx(() => [
               renderSlot(_ctx.$slots, "default", {}, void 0, true)
             ]),
             _: 3
-          }, 16),
-          createVNode(_OArticlePagination, {
-            prev: __props.prev,
-            next: __props.next,
-            "prev-label": __props.prevLabel,
-            "next-label": __props.nextLabel,
-            divider: __props.divider,
-            radius: __props.radius,
-            onNavigate
-          }, null, 8, ["prev", "next", "prev-label", "next-label", "divider", "radius"])
+          }, 16)
         ], 2)
       ], 4);
     };

package/dist/treeshaking/components/article/components/ArticleTitle.css

@@ -0,0 +1,123 @@
+.hover-icon-rotate .o-icon[data-v-b96d293f] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-b96d293f] {
+    transform: rotate(-180deg);
+}
+}
+.o-article__header[data-v-b96d293f] {
+  padding: 32px;
+  border-radius: var(--o-article-radius) var(--o-article-radius) 0 0;
+  background-image: var(--v5804c76a);
+  background-position: 100% 100%;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+@media (max-width: 1680px) {
+.o-article__header[data-v-b96d293f] {
+    padding: 24px;
+}
+}
+@media (max-width: 1200px) {
+.o-article__header[data-v-b96d293f] {
+    padding: 16px;
+}
+}
+@media (max-width: 600px) {
+.o-article__header[data-v-b96d293f] {
+    padding: 12px;
+}
+}
+.o-article__title[data-v-b96d293f] {
+  margin: 0;
+  color: var(--o-color-info1);
+  font-weight: 600;
+  font-size: 32px;
+  line-height: 44px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-article__title[data-v-b96d293f] {
+    font-size: 20px;
+    line-height: 28px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-article__title[data-v-b96d293f] {
+    font-size: 20px;
+    line-height: 28px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-article__title[data-v-b96d293f] {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (max-width: 600px) {
+.o-article__title[data-v-b96d293f] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+.o-article__meta[data-v-b96d293f] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 16px;
+  row-gap: 8px;
+  margin-top: 8px;
+}
+.o-article__tags[data-v-b96d293f] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 16px;
+  min-width: fit-content;
+  padding: 0;
+  list-style: none;
+}
+.o-article__tags-divider[data-v-b96d293f] {
+  --o-divider-label-gap: 0;
+  height: 20px;
+}
+.o-article__update-time[data-v-b96d293f] {
+  flex-shrink: 0;
+  color: var(--o-color-info3);
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-article__update-time[data-v-b96d293f] {
+    font-size: 14px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-article__update-time[data-v-b96d293f] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-article__update-time[data-v-b96d293f] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-article__update-time[data-v-b96d293f] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-article__update-time[data-v-b96d293f] {
+    flex-basis: 100%;
+}
+}
+.o-article__tag[data-v-b96d293f] {
+  --tag-height: 24px;
+  --tag-padding: 0 11px;
+}

package/dist/treeshaking/components/article/components/ArticleTitle.vue.d.ts

@@ -0,0 +1,22 @@
+import { OMarkdownMaybeElementT } from '../../markdown/types';
+type __VLS_Props = {
+    /** 文章标题（可选），未传时使用 el 渲染 */
+    title?: string;
+    /** 标题 DOM 元素（可选），title 未传时渲染 el 的 outerHTML */
+    el?: OMarkdownMaybeElementT;
+    /** 标题头部背景图地址（可选），未传时不显示背景图 */
+    headerBg?: string;
+    /** 标签列表（可选），渲染为标题下方的 OTag 标签 */
+    tags?: string[];
+    /** 所属社区（可选），渲染为标签并置于标签列表首位，用垂直分隔线与其余标签隔开 */
+    community?: string;
+    /** 标题头部展示的更新时间（可选），与标签两端对齐，文案前缀取 i18n `md.updateTime` */
+    updateTime?: string;
+    /** 圆角 */
+    radius?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    radius: string;
+    tags: string[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+export default _default;

package/dist/treeshaking/components/article/components/ArticleTitle.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./ArticleTitle.vue2.mjs";
+import './ArticleTitle.css';
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const ArticleTitle = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b96d293f"]]);
+export {
+  ArticleTitle as default
+};

package/dist/treeshaking/components/article/components/ArticleTitle.vue2.mjs

@@ -0,0 +1,97 @@
+import { defineComponent, useCssVars, computed, openBlock, createElementBlock, toDisplayString, withDirectives, unref, createBlock, withCtx, createTextVNode, createCommentVNode, Fragment, renderList } from "vue";
+import { OTag, ODivider } from "@opensig/opendesign";
+import { buildVueDompurifyHTMLDirective } from "vue-dompurify-html";
+import { useI18n } from "../../../i18n/index.mjs";
+const _hoisted_1 = { class: "o-article__header" };
+const _hoisted_2 = {
+  key: 0,
+  class: "o-article__title"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "o-article__title __mounted"
+};
+const _hoisted_4 = {
+  key: 2,
+  class: "o-article__meta"
+};
+const _hoisted_5 = {
+  key: 0,
+  class: "o-article__tags"
+};
+const _hoisted_6 = {
+  key: 1,
+  class: "o-article__update-time"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ArticleTitle",
+  props: {
+    title: {},
+    el: {},
+    headerBg: {},
+    tags: { default: () => [] },
+    community: {},
+    updateTime: {},
+    radius: { default: "var(--o-radius-xs)" }
+  },
+  setup(__props) {
+    useCssVars((_ctx) => ({
+      "v5804c76a": headerBgStyle.value
+    }));
+    const props = __props;
+    const { t } = useI18n();
+    const vDompurifyHtml = buildVueDompurifyHTMLDirective({
+      default: {
+        FORBID_ATTR: ["style"]
+      }
+    });
+    const headerBgStyle = computed(() => props.headerBg ? `url(${props.headerBg})` : "none");
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("header", _hoisted_1, [
+        __props.title ? (openBlock(), createElementBlock("h1", _hoisted_2, toDisplayString(__props.title), 1)) : withDirectives((openBlock(), createElementBlock("h1", _hoisted_3, null, 512)), [
+          [unref(vDompurifyHtml), (_a = __props.el) == null ? void 0 : _a.outerHTML]
+        ]),
+        __props.tags.length || __props.updateTime || __props.community ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          __props.tags.length || __props.community ? (openBlock(), createElementBlock("div", _hoisted_5, [
+            __props.community ? (openBlock(), createBlock(unref(OTag), {
+              key: 0,
+              class: "o-article__tag",
+              size: "large",
+              variant: "outline",
+              round: __props.community === "MindSpore" ? "pill" : __props.radius
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(__props.community), 1)
+              ]),
+              _: 1
+            }, 8, ["round"])) : createCommentVNode("", true),
+            __props.community && __props.tags.length ? (openBlock(), createBlock(unref(ODivider), {
+              key: 1,
+              direction: "v",
+              class: "o-article__tags-divider"
+            })) : createCommentVNode("", true),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.tags, (tag) => {
+              return openBlock(), createBlock(unref(OTag), {
+                key: tag,
+                class: "o-article__tag",
+                size: "large",
+                variant: "outline",
+                round: __props.community === "MindSpore" ? "pill" : __props.radius
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(tag), 1)
+                ]),
+                _: 2
+              }, 1032, ["round"]);
+            }), 128))
+          ])) : createCommentVNode("", true),
+          __props.updateTime ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(unref(t)("md.updateTime")) + toDisplayString(__props.updateTime), 1)) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/article/components/DocTitle.css

@@ -0,0 +1,246 @@
+.hover-icon-rotate .o-icon[data-v-ea84d56c] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-ea84d56c] {
+    transform: rotate(-180deg);
+}
+}
+.o-doc-title[data-v-ea84d56c] {
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px;
+  border-radius: var(--o-radius-xs);
+  background-image: var(--bc7b9dec);
+  background-position: 100% 100%;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+@media (max-width: 1680px) {
+.o-doc-title[data-v-ea84d56c] {
+    gap: 8px;
+    padding: 12px;
+}
+}
+@media (max-width: 1200px) {
+.o-doc-title[data-v-ea84d56c] {
+    gap: 8px;
+    padding: 8px;
+}
+}
+@media (max-width: 840px) {
+.o-doc-title[data-v-ea84d56c] {
+    gap: 12px;
+    padding: 16px;
+}
+}
+.o-doc-title .o-doc-title-content[data-v-ea84d56c] {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+.o-doc-title .o-doc-title-text[data-v-ea84d56c] h1 {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 32px;
+  line-height: 44px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-doc-title .o-doc-title-text[data-v-ea84d56c] h1 {
+    font-size: 20px;
+    line-height: 28px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-doc-title .o-doc-title-text[data-v-ea84d56c] h1 {
+    font-size: 20px;
+    line-height: 28px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-doc-title .o-doc-title-text[data-v-ea84d56c] h1 {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (max-width: 600px) {
+.o-doc-title .o-doc-title-text[data-v-ea84d56c] h1 {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+.o-doc-title .o-doc-title-actions[data-v-ea84d56c] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 12px;
+}
+@media (max-width: 1680px) {
+.o-doc-title .o-doc-title-actions[data-v-ea84d56c] {
+    margin-top: 8px;
+}
+}
+@media (max-width: 840px) {
+.o-doc-title .o-doc-title-actions[data-v-ea84d56c] {
+    margin-top: 0;
+}
+}
+.o-doc-title .o-doc-title-actions .o-doc-title-icon-more[data-v-ea84d56c] {
+  font-size: 24px;
+  color: var(--o-color-info2);
+}
+.o-doc-title .o-doc-title-actions .o-doc-title-source-code[data-v-ea84d56c] {
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-doc-title .o-doc-title-actions .o-doc-title-source-code[data-v-ea84d56c] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-doc-title .o-doc-title-actions .o-doc-title-source-code[data-v-ea84d56c] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-doc-title .o-doc-title-actions .o-doc-title-source-code[data-v-ea84d56c] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-doc-title .o-doc-title-actions .o-doc-title-source-code[data-v-ea84d56c] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-doc-title .o-doc-title-actions .o-doc-title-source-code[data-v-ea84d56c] .o-link-label {
+  display: flex;
+  align-items: center;
+}
+.o-doc-title .o-doc-title-actions .o-doc-title-icon-outlink[data-v-ea84d56c] {
+  font-size: 22px;
+  line-height: 30px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-doc-title .o-doc-title-actions .o-doc-title-icon-outlink[data-v-ea84d56c] {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-doc-title .o-doc-title-actions .o-doc-title-icon-outlink[data-v-ea84d56c] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-doc-title .o-doc-title-actions .o-doc-title-icon-outlink[data-v-ea84d56c] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (max-width: 600px) {
+.o-doc-title .o-doc-title-actions .o-doc-title-icon-outlink[data-v-ea84d56c] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+.o-doc-title .o-doc-title-actions .o-doc-title-update-time[data-v-ea84d56c] {
+  color: var(--o-color-info3);
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-doc-title .o-doc-title-actions .o-doc-title-update-time[data-v-ea84d56c] {
+    font-size: 14px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-doc-title .o-doc-title-actions .o-doc-title-update-time[data-v-ea84d56c] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-doc-title .o-doc-title-actions .o-doc-title-update-time[data-v-ea84d56c] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-doc-title .o-doc-title-actions .o-doc-title-update-time[data-v-ea84d56c] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-doc-title .o-doc-title-actions .o-doc-title-actions-left[data-v-ea84d56c] {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.o-doc-title .o-doc-title-actions .o-doc-title-icon-download[data-v-ea84d56c],
+.o-doc-title .o-doc-title-actions .o-doc-title-icon-star[data-v-ea84d56c],
+.o-doc-title .o-doc-title-actions .o-doc-title-icon-copy[data-v-ea84d56c] {
+  font-size: 24px;
+  cursor: pointer;
+}
+@media (hover: hover) {
+.o-doc-title .o-doc-title-actions .o-doc-title-icon-download[data-v-ea84d56c]:hover,
+  .o-doc-title .o-doc-title-actions .o-doc-title-icon-star[data-v-ea84d56c]:hover,
+  .o-doc-title .o-doc-title-actions .o-doc-title-icon-copy[data-v-ea84d56c]:hover {
+    color: var(--o-color-info1);
+}
+}
+@media (max-width: 1680px) {
+.o-doc-title .o-doc-title-actions .o-doc-title-icon-download[data-v-ea84d56c],
+  .o-doc-title .o-doc-title-actions .o-doc-title-icon-star[data-v-ea84d56c],
+  .o-doc-title .o-doc-title-actions .o-doc-title-icon-copy[data-v-ea84d56c] {
+    font-size: 20px;
+}
+}
+.o-doc-title.is-simple[data-v-ea84d56c] {
+  padding: 0;
+  background-image: none;
+  background-color: var(--o-color-fill2);
+}
+@media (max-width: 840px) {
+.o-doc-title.first-h1[data-v-ea84d56c] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+}
+.o-doc-title-dlg-action-box-container[data-v-ea84d56c] {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  column-gap: 8px;
+  row-gap: 24px;
+}
+.o-doc-title-dlg-action-box-container .o-doc-title-dlg-action-box[data-v-ea84d56c] {
+  flex: 0 0 calc(33.333% - 8px);
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+}
+.o-doc-title-dlg-action-box-container .o-doc-title-dlg-action-box-icon[data-v-ea84d56c] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  background-color: var(--o-color-fill1);
+  border-radius: 50%;
+  font-size: 24px;
+}
+.o-doc-title-dlg-action-box-container .o-doc-title-dlg-action-box-label[data-v-ea84d56c] {
+  margin-top: 8px;
+  color: var(--o-color-info1);
+}