新增：Badge 徽章组件

2022-09-03 11:31:54 +08:00
parent 09c88d4efc
commit 90e3812f3e
16 changed files with 82 additions and 14 deletions
--- a/docs/.vitepress/theme/components/layout/Comment.vue
+++ b/docs/.vitepress/theme/components/layout/Comment.vue
@@ -0,0 +1,81 @@
+<template>
+  <div id="comment-container"></div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, toRefs, onMounted } from 'vue'
+import { useData } from 'vitepress'
+import md5 from 'blueimp-md5'
+import $ from 'jquery'
+import { Message } from '@arco-design/web-vue'
+import '@arco-design/web-vue/es/message/style/css.js'
+import Gitalk from 'gitalk'
+import '../../styles/components/gitalk.css'
+
+// 定义属性
+const props = defineProps({
+  commentConfig: Object
+})
+
+const data = reactive({
+  type: props.commentConfig?.type ?? 'gitalk'
+})
+const { type } = toRefs(data)
+
+// 初始化评论组件配置
+const { page } = useData()
+let gitalk
+if (type.value && type.value == 'gitalk') {
+  gitalk = new Gitalk({
+    clientID: '1de126ce1fbdbe049709',
+    clientSecret: '035fe49874a43e5cefc28a99b7e40b1925319c62',
+    repo: 'charles7c.github.io',
+    owner: 'Charles7c',
+    admin: ['Charles7c'],
+    id: md5(page.value.relativePath),
+    language: 'zh-CN',
+    distractionFreeMode: false,
+    // 默认: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token
+    proxy: 'https://vercel.charles7c.top/github_access_token'
+  })
+}
+
+// 渲染评论组件
+onMounted(() => {
+  if (type.value && type.value == 'gitalk') {
+    gitalk.render('comment-container')
+
+    // 如果点赞，先判断有没有登录
+    let $gc = $('#comment-container');
+    $gc.on('click', '.gt-comment-like', function () {
+      if (!window.localStorage.getItem('GT_ACCESS_TOKEN')) {
+        Message.warning({
+          content:'点赞前，请您先进行登录',
+          closable: true
+        })
+ 
+        return false
+      }
+      return true
+    })
+    // 提交评论后输入框高度没有重置bug
+    $gc.on('click', '.gt-header-controls .gt-btn-public', function () {
+      let $gt = $('.gt-header-textarea')
+      $gt.css('height', '72px')
+    })
+    // 点击预览时，隐藏评论按钮
+    $gc.on('click', '.gt-header-controls .gt-btn-preview', function () {
+      let pl = $('.gt-header-controls .gt-btn-public');
+      if (pl.hasClass('hide')) {
+        pl.removeClass('hide')
+      } else {
+        // 隐藏
+        pl.addClass('hide')
+      }
+    })
+  }
+})
+</script>
+
+<style scoped>
+</style>
--- a/docs/.vitepress/theme/components/layout/Copyright.vue
+++ b/docs/.vitepress/theme/components/layout/Copyright.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="copyright">
+    <div class="content">
+      <div class="item">
+        <svg class="icon" width="20" height="20" viewBox="0 0 1024 1024">
+          <title>原创作者</title>
+          <path d="M614.72 554.538c-49.086-6.399-100.27-2.1-149.256-2.1-119.465 0-209.04 95.972-206.84 215.437 0 17.095 8.498 31.99 23.493 40.488 14.896 10.697 34.09 14.896 53.285 17.095 61.882 6.398 123.664 6.398 198.342 6.398 40.488 0 93.872-2.1 142.858-4.298 27.692 0 53.284-4.3 78.877-14.896 19.194-8.498 29.89-19.194 31.99-40.488 8.498-104.57-72.478-204.84-172.75-217.636zM680.8 375.39c0-87.474-74.678-162.053-164.251-162.053-89.574 0-162.053 74.679-162.053 162.053-2.1 87.474 74.678 164.252 162.053 164.252 89.673 0 164.252-74.678 164.252-164.252z" fill="#FFF"></path>
+          <path d="M512.35 0C228.733 0 .5 228.233.5 511.85s228.233 511.85 511.85 511.85 511.85-228.233 511.85-511.85S795.967 0 512.35 0zm275.12 772.074c-2.1 21.294-12.797 31.99-31.991 40.488-25.593 10.697-51.185 14.896-78.877 14.896-49.086 2.099-102.37 4.298-142.858 4.298-74.678 0-136.46 0-198.342-6.398-19.195-2.1-38.389-6.398-53.285-17.095-14.895-8.497-23.493-23.493-23.493-40.488-2.1-119.465 87.475-215.437 206.84-215.437 49.085 0 100.27-4.299 149.256 2.1 100.27 12.896 181.247 113.166 172.75 217.636zM354.495 375.39c0-87.474 72.479-162.053 162.053-162.053S680.8 288.016 680.8 375.39c0 89.574-74.679 164.252-164.252 164.252-87.375 0-164.152-76.778-162.053-164.252z" fill="#249FF8"></path>
+        </svg>
+        <span>版权属于：</span>
+        <span><a :href="authorLink" title="进入作者主页" target="_blank">{{ author }}</a></span>
+      </div>
+      <div class="item">
+        <svg class="icon" width="20" height="20" viewBox="0 0 1024 1024">
+          <title>本文链接</title>
+          <path d="M511.854 0A511.854 511.854 0 1 0 1024 511.854 511.854 511.854 0 0 0 511.854 0z" fill="#39B54A"></path>
+          <path d="M576.491 630.355L460.028 746.818a129.565 129.565 0 0 1-182.555 0l-2.038-2.038a128.983 128.983 0 0 1 0-182.264l81.233-81.233a179.644 179.644 0 0 0 13.102 70.46l-52.7 52.408a69.878 69.878 0 0 0 0 98.703l2.038 2.038a70.169 70.169 0 0 0 98.703 0l116.463-116.463a69.878 69.878 0 0 0 0-98.703l-2.039-2.038a69.587 69.587 0 0 0-13.975-10.772l42.509-42.51a128.11 128.11 0 0 1 13.102 11.356l2.038 2.038a129.274 129.274 0 0 1 0 182.264z" fill="#FFF"></path>
+          <path d="M746.236 460.902l-81.233 81.233a179.353 179.353 0 0 0-13.102-70.46l52.7-52.409a69.878 69.878 0 0 0 0-98.702l-2.039-2.038a69.878 69.878 0 0 0-98.702 0L487.397 434.989a69.878 69.878 0 0 0 0 98.702l2.038 2.038a68.422 68.422 0 0 0 13.976 10.773l-42.51 42.51a136.553 136.553 0 0 1-13.101-11.356l-2.038-2.038a128.983 128.983 0 0 1 0-182.265l116.463-116.462a129.565 129.565 0 0 1 182.555 0l2.038 2.038a128.983 128.983 0 0 1 0 182.264z" fill="#FFF"></path>
+        </svg>
+        <span>本文链接：</span>
+        <span><a :href="articleLink" target="_blank">{{ articleLink }}</a></span>
+      </div>
+      <div class="item">
+        <svg class="icon" viewBox="0 0 1024 1024">
+          <title>作品协议</title>
+          <path d="M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z" fill="#F3B243"></path>
+          <path d="M540.672 323.584a90.112 90.112 0 1 0 180.224 0 90.112 90.112 0 1 0-180.224 0zM540.672 688.128a90.112 90.112 0 1 0 180.224 0 90.112 90.112 0 1 0-180.224 0zM229.376 512a90.112 90.112 0 1 0 180.224 0 90.112 90.112 0 1 0-180.224 0z" fill="#FFF"></path>
+          <path d="M341.037 480.37l257.344-175.718 27.713 40.592-257.34 175.718z" fill="#FFF"></path>
+          <path d="M349.053 488.452L601.907 670.56l-28.725 39.887L320.307 528.34z" fill="#FFF"></path>
+        </svg>
+        <span>作品采用：</span>
+        <span>《<a :href="theme.copyrightConfig.licenseLink" target="_blank">{{ theme.copyrightConfig.license }}</a>》许可协议授权</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, toRefs } from 'vue'
+import { useData } from 'vitepress'
+const { theme, frontmatter } = useData()
+
+const data = reactive({
+  author: frontmatter.value?.author ?? theme.value.articleMetadataConfig.author,
+  authorLink: frontmatter.value?.authorLink ?? theme.value.articleMetadataConfig.authorLink,
+  articleLink: decodeURI(window.location.href)
+})
+const { author, authorLink, articleLink } = toRefs(data)
+</script>
+
+<style scoped>
+.copyright {
+  border-color: var(--vp-custom-block-tip-border);
+  background-color: var(--vp-custom-block-tip-bg);
+  border-radius: 6px;
+  color: var(--vp-c-text-2);
+  font-size: 15px;
+  margin-top: 50px;
+}
+
+.copyright .content {
+  
+  padding: 13px 16px;
+}
+
+.copyright .content .item {
+  margin-bottom: 5px;
+  word-break: break-word;
+  line-height: 22px;
+}
+
+.copyright .content .item .icon {
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  margin-right: .375rem;
+  vertical-align: -2.5px;
+}
+
+a {
+  font-weight: 400;
+  color: var(--vp-c-text-2);
+}
+
+a:hover {
+  color: var(--vp-c-brand);
+}
+</style> 
--- a/docs/.vitepress/theme/components/layout/Footer.vue
+++ b/docs/.vitepress/theme/components/layout/Footer.vue
@@ -0,0 +1,87 @@
+<template>
+  <footer class="VPFooter">
+    <div class="container">
+      <p v-if="theme.footerConfig.icpRecordCode" class="recordCode">
+        <span class="icon">
+          <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><title>ICP备案号</title><path d="M778.24 163.84c-76.8-40.96-165.888-61.44-269.312-61.44s-192.512 20.48-269.312 61.44h-133.12l23.552 337.92c8.192 113.664 67.584 217.088 162.816 280.576l215.04 144.384 215.04-144.384c96.256-63.488 155.648-166.912 163.84-280.576l23.552-337.92H778.24z m47.104 333.824c-7.168 94.208-56.32 181.248-135.168 233.472l-181.248 120.832L327.68 731.136c-78.848-53.248-129.024-139.264-135.168-233.472L173.056 225.28h136.192v-26.624c58.368-23.552 124.928-34.816 199.68-34.816s141.312 12.288 199.68 34.816V225.28H844.8l-19.456 272.384z"></path><path d="M685.056 328.704v-46.08H455.68c2.048-4.096 6.144-9.216 11.264-15.36 5.12-7.168 9.216-12.288 11.264-15.36L419.84 240.64c-31.744 46.08-75.776 87.04-133.12 123.904 4.096 4.096 10.24 11.264 18.432 21.504l17.408 17.408c23.552-15.36 45.056-31.744 63.488-50.176 26.624 25.6 49.152 43.008 67.584 51.2-46.08 15.36-104.448 27.648-175.104 35.84 2.048 5.12 6.144 13.312 9.216 24.576 4.096 11.264 6.144 19.456 7.168 24.576l39.936-7.168v218.112H389.12V680.96h238.592v19.456h54.272V481.28H348.16c60.416-12.288 114.688-27.648 163.84-46.08 49.152 19.456 118.784 34.816 210.944 46.08 5.12-17.408 10.24-34.816 17.408-51.2-62.464-4.096-116.736-12.288-161.792-24.576 38.912-20.48 74.752-46.08 106.496-76.8z m-150.528 194.56h94.208v41.984h-94.208v-41.984z m0 78.848h94.208v41.984h-94.208v-41.984z m-144.384-78.848h94.208v41.984H390.144v-41.984z m0 78.848h94.208v41.984H390.144v-41.984zM424.96 326.656h182.272c-26.624 22.528-57.344 41.984-94.208 57.344-31.744-15.36-61.44-34.816-88.064-57.344z"></path></svg>
+        </span>
+        <span class="content">
+          <a href="https://beian.miit.gov.cn" target="_blank">{{ theme.footerConfig.icpRecordCode }}</a>
+        </span>
+      </p>
+      <p v-if="theme.footerConfig.publicSecurityRecordCode" class="recordCode">
+        <span class="icon">
+          <img src="/img/badge/gongan.png" title="联网备案号">
+        </span>
+        <span class="content">
+          <a :href="'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=' + theme.footerConfig.publicSecurityRecordCode.replace('号', '').substring(theme.footerConfig.publicSecurityRecordCode.indexOf('备') + 1)" target="_blank">{{ theme.footerConfig.publicSecurityRecordCode }}</a>
+        </span>
+      </p>
+      <p v-if="theme.footerConfig.copyright" class="copyright" v-html="theme.footerConfig.copyright"></p>
+    </div>
+  </footer>
+</template>
+
+<script lang="ts" setup>
+import { useData } from 'vitepress'
+const { theme } = useData()
+</script>
+
+<style scoped>
+.VPFooter {
+  position: relative;
+  z-index: var(--vp-z-index-footer);
+  border-top: 1px solid var(--vp-c-divider-light);
+  padding: 25px 24px;
+  background-color: var(--vp-c-bg);
+}
+.VPFooter.has-sidebar {
+  display: none;
+}
+a:hover {
+  color: var(--vp-c-brand);
+}
+@media (min-width: 768px) {
+  .VPFooter {
+    padding: 25px;
+  }
+}
+.container {
+  margin: 0 auto;
+  max-width: var(--vp-layout-max-width);
+  text-align: center;
+}
+.recordCode,
+.copyright {
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+.recordCode   { order: 2; }
+.copyright { order: 1; }
+
+p {
+  margin: 0;
+}
+.recordCode span {
+  display: inline-block;
+}
+.recordCode span:not(:last-child) {
+  margin-right: .175rem;
+}
+.recordCode .icon svg {
+  height: 16px;
+  width: 16px;
+  /*fill: var(--vp-c-text-2);*/
+  fill: #5791ED;
+  position: relative;
+  top: 3px;
+}
+.recordCode .icon img {
+  height: 14px;
+  width: 14px;
+  position: relative;
+  top: 2px;
+}
+</style>