ui库和web端产品库合并版本(还需修复细节)

ui/packages/basic/AiArticle.vue

@@ -0,0 +1,331 @@
+<template>
+  <div class="ai-article">
+    <div v-html="value"></div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'AiArticle',
+
+    props: {
+      value: {
+        type: String
+      }
+    }
+  }
+</script> 
+
+<style lang="scss" scoped>
+  .ai-article {
+    width: 100%;
+    line-height: 1.75;
+    font-weight: 400;
+    color: #333;
+    font-size: 14px;
+    text-align: justify;
+    overflow-x: auto;
+    word-break: break-word;
+    
+    ::v-deep h1 {
+      margin: 1.3rem 0;
+      line-height: 1.2
+    }
+    
+    ::v-deep p {
+      line-height: 2.27rem
+    }
+    
+    ::v-deep hr {
+      border: none;
+      border-top: 1px solid #ddd;
+      margin-top: 2.7rem;
+      margin-bottom: 2.7rem
+    }
+    
+    ::v-deep img:not(.equation), ::v-deep iframe, ::v-deep embed, ::v-deep video {
+      display: block;
+      margin: 18px auto;
+      max-width: 100% !important;
+    }
+    
+    ::v-deep img.equation {
+      margin: 0 .1em;
+      max-width: 100% !important;
+      vertical-align: middle
+    }
+
+    ::v-deep figure {
+      margin: 2.7rem auto;
+      text-align: center
+    }
+
+    ::v-deep img:not(.equation) {
+      cursor: zoom-in
+    }
+
+    ::v-deep figure figcaption {
+      text-align: center;
+      font-size: 1rem;
+      line-height: 2.7rem;
+      color: #909090
+    }
+
+    ::v-deep pre {
+      line-height: 1.93rem;
+      overflow: auto
+    }
+
+    ::v-deep code,
+    ::v-deep pre {
+      font-family: Menlo, Monaco, Consolas, Courier New, monospace
+    }
+
+    ::v-deep code {
+      font-size: 1rem;
+      padding: .26rem .53em;
+      word-break: break-word;
+      color: #4e5980;
+      background-color: #f8f8f8;
+      border-radius: 2px;
+      overflow-x: auto
+    }
+    
+    ::v-deep pre>code {
+      font-size: 1rem;
+      padding: .67rem 1.3rem;
+      margin: 0;
+      word-break: normal;
+      display: block
+    }
+    
+    ::v-deep a {
+      color: #259
+    }
+
+    ::v-deep a:active,
+    ::v-deep a:hover {
+      color: #275b8c
+    }
+
+    ::v-deep table {
+      width: 100%;
+      margin-top: 18px;
+      margin-bottom: 18px;
+      overflow: auto;
+      font-size: 1rem;
+      text-align: center;
+      border-top: 1px solid #ccc;
+      border-left: 1px solid #ccc;
+    }
+
+    ::v-deep thead {
+      background: #f6f6f6;
+      color: #000;
+      text-align: left
+    }
+
+    ::v-deep td,
+    ::v-deep th {
+      padding: 3px 5px;
+      border-bottom: 1px solid #ccc;
+      border-right: 1px solid #ccc;
+    }
+    
+    ::v-deep td {
+      min-width: 10rem
+    }
+
+    ::v-deep blockquote {
+      margin: 1em 0;
+      border-left: 4px solid #ddd;
+      padding: 0 1.3rem
+    }
+
+    ::v-deep blockquote>p {
+      margin: .6rem 0
+    }
+
+    ::v-deep ol,
+    ::v-deep ul {
+      padding-left: 2.7rem
+    }
+
+    ::v-deep ol li,
+    ::v-deep ul li {
+      margin-bottom: .6rem
+    }
+
+    ::v-deep ol ol,
+    ::v-deep ol ul,
+    ::v-deep ul ol,
+    ::v-deep ul ul {
+      margin-top: .27rem
+    }
+
+    ::v-deep pre>code {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+      color: #333;
+      background: #f8f8f8
+    }
+
+    ::v-deep p {
+      line-height: inherit;
+      margin-top: 18px;
+      margin-bottom: 18px
+    }
+
+    ::v-deep img {
+      max-height: none
+    }
+
+    ::v-deep a {
+      color: #0269c8;
+      border-bottom: 1px solid #d1e9ff
+    }
+
+    ::v-deep code {
+      background-color: #fff5f5;
+      color: #ff502c;
+      font-size: .87em;
+      padding: .065em .4em
+    }
+
+    ::v-deep blockquote {
+      color: #666;
+      padding: 1px 23px;
+      margin: 18px 0;
+      border-left: 4px solid #cbcbcb;
+      background-color: #f8f8f8
+    }
+
+    ::v-deep blockquote:after {
+      display: block;
+      content: ""
+    }
+
+    ::v-deep blockquote>p {
+      margin: 10px 0
+    }
+
+    ::v-deep blockquote.warning {
+      position: relative;
+      border-left-color: #f75151;
+      margin-left: 8px
+    }
+
+    ::v-deep blockquote.warning:before {
+      position: absolute;
+      top: 14px;
+      left: -12px;
+      background: #f75151;
+      border-radius: 50%;
+      content: "!";
+      width: 20px;
+      height: 20px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center
+    }
+
+    ::v-deep ol,
+    ::v-deep ul {
+      padding-left: 28px
+    }
+
+    ::v-deep ol li,
+    ::v-deep ul li {
+      margin-bottom: 0;
+      list-style: inherit
+    }
+
+    ::v-deep ol li.task-list-item,
+    ::v-deep ul li.task-list-item {
+      list-style: none
+    }
+
+    ::v-deep ol li.task-list-item ol,
+    ::v-deep ol li.task-list-item ul,
+    ::v-deep ul li.task-list-item ol,
+    ::v-deep ul li.task-list-item ul {
+      margin-top: 0
+    }
+
+    ::v-deep ol li {
+      padding-left: 6px
+    }
+
+    ::v-deep pre {
+      position: relative;
+      line-height: 1.75
+    }
+
+    ::v-deep pre>code {
+      padding: 15px 12px
+    }
+
+    ::v-deep pre>code.hljs[lang] {
+      padding: 18px 15px 12px
+    }
+
+    ::v-deep h1,
+    ::v-deep h2,
+    ::v-deep h3,
+    ::v-deep h4,
+    ::v-deep h5,
+    ::v-deep h6 {
+      color: #333;
+      line-height: 1.5;
+      margin-top: 35px;
+      margin-bottom: 10px;
+      padding-bottom: 5px;
+      font-weight: 500;
+    }
+
+    ::v-deep h1 {
+      font-size: 30px;
+      margin-bottom: 5px
+    }
+
+    ::v-deep h2 {
+      padding-bottom: 12px;
+      font-size: 24px;
+      border-bottom: 1px solid #ececec
+    }
+
+    ::v-deep h3 {
+      font-size: 18px;
+      padding-bottom: 0
+    }
+
+    ::v-deep h4 {
+      font-size: 16px
+    }
+
+    ::v-deep h5 {
+      font-size: 15px
+    }
+
+    ::v-deep h6 {
+      margin-top: 5px
+    }
+
+    ::v-deep h1.heading+h2.heading {
+      margin-top: 20px
+    }
+
+    ::v-deep h1.heading+h3.heading {
+      margin-top: 15px
+    }
+
+    ::v-deep .heading+.heading {
+      margin-top: 0
+    }
+
+    ::v-deep h1+:not(.heading) {
+      margin-top: 25px
+    }
+  }
+</style>