@10yun/cv-mobile-ui 0.5.8 → 0.5.10

package/ui-cv/cv-geo-local/cv-geo-local.vue

@@ -4,7 +4,6 @@
       <textarea
         class="cv-geo-local-content"
         v-model="localVal"
-        :value="localVal"
         :maxlength="maxlength"
         :placeholder="placeholder"
         placeholder-class="cv-geo-local-placeholder"

package/ui-cv/cv-layout-topbar/cv-layout-topbar.vue

@@ -0,0 +1,238 @@
+<template>
+  <view>
+    <view class="cv-topbar-wrap">
+      <text class="cv-topbar-bg"></text>
+      <view class="cv-topbar-main">
+        <view class="cv-topbar-lt" @tap="bindLeftFunc">
+          <text v-if="leftText">{{ leftText }}</text>
+          <cv-icons v-if="leftIcon" :type="leftIcon" size="18" color="#fff" />
+        </view>
+        <view class="cv-topbar-center">
+          <view class="cv-topbar-title">{{ centerText }}</view>
+        </view>
+        <view class="cv-topbar-rt" @tap="bindRightFunc">
+          <cv-icons v-if="rightIcon" :type="rightIcon" size="18" color="#fff" />
+          <text v-if="rightText">{{ rightText }}</text>
+        </view>
+      </view>
+    </view>
+    <view class="cv-topbar-fixhold">
+      <view></view>
+      <view></view>
+    </view>
+  </view>
+</template>
+<script>
+export default {
+  // emits: {
+  //   leftFunc: (value) => {
+  //     if (typeof value === 'string') {
+  //       return true;
+  //     } else {
+  //       return false;
+  //     }
+  //   },
+  //   rightFunc: (value) => {
+  //     console.log('value---', value);
+  //     if (typeof value === 'string') {
+  //       return true;
+  //     } else {
+  //       return false;
+  //     }
+  //   }
+  // },
+  emits: ['leftFunc', 'rightFunc'],
+  props: {
+    leftText: '',
+    leftIcon: '',
+    centerText: '',
+    rightText: '',
+    rightIcon: ''
+    // rightFunc: {
+    //   type: Function,
+    //   default: () => {}
+    // }
+  },
+  data() {
+    return {};
+  },
+  created() {
+    console.log('----onRightFunc----', this.$attrs.onRightFunc);
+  },
+  methods: {
+    bindLeftFunc() {
+      const result = this.$emit('leftFunc');
+      // if (!result) {
+      //   uni.navigateBack({
+      //     // 返回
+      //     delta: 1
+      //   });
+      // }
+    },
+    bindRightFunc() {
+      try {
+        this.$emit('rightFunc');
+      } catch (e) {
+        console.log('--222--');
+      }
+    }
+  }
+};
+</script>
+<style>
+.cv-topbar-wrap {
+  width: 100%;
+  top: -1px;
+  right: 0px;
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  height: auto;
+  z-index: 20;
+  /* #ifdef H5 */
+  margin-top: 44px;
+  /* #endif */
+  margin-top: 0 !important;
+}
+.cv-topbar-bg {
+  display: block;
+  width: 100%;
+  height: var(--status-bar-height);
+  background: #409eff;
+}
+.cv-topbar-main {
+  box-sizing: border-box;
+  width: 100%;
+  height: 44px;
+  padding-right: 16rpx;
+  display: flex;
+  align-items: center;
+  background: #409eff;
+}
+.cv-topbar-main > image {
+  width: 25px;
+  height: 25px;
+  margin-left: 16rpx;
+}
+.cv-topbar-main > text {
+  width: 35px;
+  height: 35px;
+  margin-left: 16rpx;
+  color: #f6f6f6;
+  font-size: 56rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.cv-topbar-main > view.item {
+  margin: 0;
+  margin-left: 16rpx;
+  height: 35px;
+  width: 35px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #f1f1f1;
+}
+.cv-topbar-main > view.item > text {
+  display: block;
+  font-size: 12px;
+  line-height: 100%;
+  color: #ececec;
+}
+.cv-topbar-main > view.search-input {
+  height: 30px;
+  flex: 1;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 12rpx;
+  font-size: 28rpx;
+  margin: 0;
+  margin-left: 16rpx;
+  padding-right: 16rpx;
+  padding-left: 16rpx;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.cv-topbar-main > view.search-input > input {
+  flex: 1;
+  border: none;
+  min-height: auto;
+  display: inline-block;
+  color: #fff;
+  font-size: 15px;
+}
+.cv-topbar-main > view.search-input > image {
+  width: 16px;
+  height: 16px;
+  margin-right: 5px;
+}
+.cv-topbar-main > view.item > image {
+  width: 25px;
+  height: 25px;
+}
+
+/* 占位 */
+.cv-topbar-fixhold {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.cv-topbar-fixhold > view:nth-of-type(1) {
+  width: 100%;
+  height: var(--status-bar-height);
+}
+.cv-topbar-fixhold > view:nth-of-type(2) {
+  width: 100%;
+  height: 44px;
+}
+
+.cv-topbar-center {
+  color: #fff;
+  font-weight: 700;
+  font-size: 16px;
+  text-align: center;
+  height: 20px;
+}
+
+.cv-topbar-title {
+  position: absolute;
+  left: 70px;
+  right: 70px;
+  min-width: 0;
+  user-select: auto;
+}
+.cv-topbar-lt {
+  position: absolute;
+  left: 10px;
+  flex-direction: row-reverse;
+  font-size: 28rpx;
+  color: #fff;
+  font-weight: normal;
+  display: flex;
+}
+
+.cv-topbar-lt text {
+  flex: 1;
+  font-size: 15px;
+  text-align: center;
+  height: 20px;
+}
+.cv-topbar-rt {
+  position: absolute;
+  right: 10px;
+  flex-direction: row-reverse;
+  font-size: 28rpx;
+  color: #fff;
+  font-weight: normal;
+  display: flex;
+}
+
+.cv-topbar-rt text {
+  flex: 1;
+  font-size: 15px;
+  text-align: center;
+  height: 20px;
+}
+</style>

package/ui-cv/cv-markdown-show/cv-markdown-show.vue

@@ -0,0 +1,109 @@
+<!-- uniapp vue3 markdown解析 -->
+<template>
+  <view class="ua__markdown">
+    <rich-text space="nbsp" :nodes="parseNodes(source)" @itemclick="handleItemClick"></rich-text>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import MarkdownIt from './lib/markdown-it.min.js';
+import hljs from './lib/highlight/uni-highlight.min.js';
+import './lib/highlight/atom-one-dark.css';
+import parseHtml from './lib/html-parser.js';
+const props = defineProps({
+  // 解析内容
+  source: String,
+  showLine: { type: [Boolean, String], default: true }
+});
+
+let copyCodeData = [];
+const markdown = MarkdownIt({
+  html: true,
+  highlight: function (str, lang) {
+    let preCode = '';
+    try {
+      preCode = hljs.highlightAuto(str).value;
+    } catch (err) {
+      preCode = markdown.utils.escapeHtml(str);
+    }
+    const lines = preCode.split(/\n/).slice(0, -1);
+    // 添加自定义行号
+    let html = lines
+      .map((item, index) => {
+        if (item == '') {
+          return '';
+        }
+        return '<li><span class="line-num" data-line="' + (index + 1) + '"></span>' + item + '</li>';
+      })
+      .join('');
+    if (props.showLine) {
+      html = '<ol style="padding: 0px 30px;">' + html + '</ol>';
+    } else {
+      html = '<ol style="padding: 0px 7px;list-style:none;">' + html + '</ol>';
+    }
+    copyCodeData.push(str);
+    let htmlCode = `<div class="markdown-wrap">`;
+    // #ifndef MP-WEIXIN
+    htmlCode += `<div style="color: #aaa;text-align: right;font-size: 12px;padding:8px;">`;
+    htmlCode += `${lang}<a class="copy-btn" code-data-index="${copyCodeData.length - 1}" style="margin-left: 8px;">复制代码</a>`;
+    htmlCode += `</div>`;
+    // #endif
+    htmlCode += `<pre class="hljs" style="padding:10px 8px 0;margin-bottom:5px;overflow: auto;display: block;border-radius: 5px;"><code>${html}</code></pre>`;
+    htmlCode += '</div>';
+    return htmlCode;
+  }
+});
+const parseNodes = (value) => {
+  if (!value) return;
+  // 解析<br />到\n
+  value = value.replace(/<br>|<br\/>|<br \/>/g, '\n');
+  value = value.replace(/&nbsp;/g, ' ');
+  let htmlString = '';
+  if (value.split('```').length % 2) {
+    let mdtext = value;
+    if (mdtext[mdtext.length - 1] != '\n') {
+      mdtext += '\n';
+    }
+    htmlString = markdown.render(mdtext);
+  } else {
+    htmlString = markdown.render(value);
+  }
+  // 解决小程序表格边框型失效问题
+  htmlString = htmlString.replace(/<table/g, `<table class="table"`);
+  htmlString = htmlString.replace(/<tr/g, `<tr class="tr"`);
+  htmlString = htmlString.replace(/<th>/g, `<th class="th">`);
+  htmlString = htmlString.replace(/<td/g, `<td class="td"`);
+  htmlString = htmlString.replace(/<hr>|<hr\/>|<hr \/>/g, `<hr class="hr">`);
+
+  // #ifndef APP-NVUE
+  return htmlString;
+  // #endif
+
+  // 将htmlString转成htmlArray，反之使用rich-text解析
+  // #ifdef APP-NVUE
+  return parseHtml(htmlString);
+  // #endif
+};
+
+// 复制代码
+const handleItemClick = (e) => {
+  let { attrs } = e.detail.node;
+  let { 'code-data-index': codeDataIndex, class: className } = attrs;
+  if (className == 'copy-btn') {
+    uni.setClipboardData({
+      data: copyCodeData[codeDataIndex],
+      showToast: false,
+      success() {
+        uni.showToast({
+          title: '复制成功',
+          icon: 'none'
+        });
+      }
+    });
+  }
+};
+</script>
+<style scoped>
+@import url('./markdown.css');
+</style>

package/ui-cv/cv-markdown-show/lib/highlight/atom-one-dark.css

@@ -0,0 +1 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}

package/ui-cv/cv-markdown-show/lib/highlight/atom-one-light.css

@@ -0,0 +1 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#383a42;background:#fafafa}.hljs-comment,.hljs-quote{color:#a0a1a7;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e45649}.hljs-literal{color:#0184bb}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#50a14f}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#4078f2}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#c18401}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}

package/ui-cv/cv-markdown-show/lib/highlight/github-dark.min.css

@@ -0,0 +1,10 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}