uview-ultra 4.5.46

package/components/up-markdown/up-markdown.vue

@@ -0,0 +1,289 @@
+<template>
+  <view class="up-markdown" :class="theme">
+    <up-parse :content="parsedContent" :previewImg="previewImg"></up-parse>
+  </view>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { commonProps } from '../../libs/composable/useUltraUI.js'
+import { marked } from './marked.esm.js'
+
+defineOptions({
+	name: 'up-markdown',
+	// #ifdef MP-WEIXIN
+	options: {
+		virtualHost: true
+	}
+	// #endif
+})
+
+const props = defineProps({
+	...commonProps,
+	// markdown内容
+	content: {
+		type: String,
+		default: ''
+	},
+	// 是否启用图片预览
+	previewImg: {
+		type: Boolean,
+		default: true
+	},
+	// 是否显示代码块行号
+	showLineNumber: {
+		type: Boolean,
+		default: false
+	},
+	// 主题样式 'light' | 'dark'
+	theme: {
+		type: String,
+		default: 'light'
+	}
+})
+
+const parsedContent = ref('')
+
+function handleCodeBlock(html) {
+	return html.replace(/<pre><code([^>]*)>([^<]+)<\/code><\/pre>/g, (match, lang, code) => {
+		const language = lang.match(/class="language-([^"]+)"/)
+		const langClass = language ? `language-${language[1]}` : ''
+
+		let result = `<pre class="up-markdown-code ${langClass}">`
+
+		if (props.showLineNumber) {
+			const lines = code.split('\n').filter(line => line.trim() !== '')
+			result += '<span class="up-markdown-line-numbers">'
+			lines.push('')
+			lines.forEach((_, index) => {
+				result += `<span class="up-markdown-line-number">${index + 1}</span>`
+			})
+			result += '</span>'
+		}
+
+		result += `<code class='code-lang ${langClass}'>${code}</code></pre>`
+		return result
+	})
+}
+
+function applyTheme(html) {
+	return html
+}
+
+function parseMarkdown(content) {
+	if (!content) {
+		parsedContent.value = ''
+		return
+	}
+	let parsed = marked(content)
+	parsed = handleCodeBlock(parsed)
+	parsed = applyTheme(parsed)
+	parsedContent.value = parsed
+}
+
+watch(() => props.content, (newVal) => {
+	parseMarkdown(newVal)
+}, { immediate: true })
+</script>
+
+
+<style lang="scss" scoped>
+.up-markdown {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  color: #333;
+  padding: 16px;
+  word-wrap: break-word;
+
+  /* 标题样式 */
+  ::v-deep h1 {
+    font-size: 32px;
+    margin: 8px 0;
+    font-weight: bold;
+  }
+
+  ::v-deep h2 {
+    font-size: 24px;
+    margin: 8px 0;
+    font-weight: bold;
+  }
+
+  ::v-deep h3 {
+    font-size: 18px;
+    margin: 7px 0;
+    font-weight: bold;
+  }
+
+  ::v-deep h4 {
+    font-size: 16px;
+    margin: 7px 0;
+    font-weight: bold;
+  }
+
+  ::v-deep h5 {
+    font-size: 13px;
+    margin: 6px 0;
+    font-weight: bold;
+  }
+
+  ::v-deep h6 {
+    font-size: 10px;
+    margin: 5px 0;
+    font-weight: bold;
+  }
+
+  /* 段落样式 */
+  ::v-deep p {
+    margin: 16px 0;
+  }
+
+  /* 链接样式 */
+  ::v-deep a {
+    color: #007AFF;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  /* 列表样式 */
+  ::v-deep ul,
+  ::v-deep ol {
+    margin: 16px 0;
+    padding-left: 32px;
+
+    li {
+      margin: 8px 0;
+    }
+  }
+
+  ::v-deep ul li {
+    list-style-type: disc;
+  }
+
+  ::v-deep ol li {
+    list-style-type: decimal;
+  }
+
+  /* 引用样式 */
+  ::v-deep blockquote {
+    margin: 8px 0;
+    padding: 0 10px;
+    border-left: 4px solid #ccc;
+    color: #666;
+  }
+
+  /* 代码样式 */
+  ::v-deep &-code {
+    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+    font-size: 14px;
+    background-color: #f6f8fa;
+    padding: 3px 6px;
+    border-radius: 3px;
+    display: flex;
+  }
+  ::v-deep .code-lang {
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  ::v-deep pre {
+    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+    font-size: 14px;
+    background-color: #f6f8fa;
+    padding: 16px;
+    overflow: auto;
+    border-radius: 6px;
+    margin: 16px 0;
+
+    ::v-deep code {
+      background: none;
+      padding: 0;
+    }
+  }
+
+  /* 表格样式 */
+  ::v-deep table {
+    border-collapse: collapse;
+    margin: 16px 0;
+    width: 100%;
+
+    th,
+    td {
+      padding: 6px 13px;
+      border: 1px solid #dfe2e5;
+    }
+
+    th {
+      font-weight: 600;
+    }
+
+    tr:nth-child(2n) {
+      background-color: #f6f8fa;
+    }
+  }
+
+  /* 图片样式 */
+  ::v-deep img {
+    max-width: 100%;
+    box-sizing: content-box;
+    background-color: #fff;
+    margin: 16px 0;
+  }
+
+  /* 分割线样式 */
+  ::v-deep hr {
+    height: 1px;
+    padding: 0;
+    margin: 24px 0;
+    background-color: #e1e4e8;
+    border: 0;
+  }
+
+  /* 深色主题 */
+  &.dark {
+    color: #ccc;
+    background-color: #1e1e1e;
+
+    ::v-deep &-code {
+      background-color: #2d2d2d;
+      color: #dcdcdc;
+    }
+
+    ::v-deep pre {
+      background-color: #2d2d2d;
+      color: #dcdcdc;
+    }
+
+    ::v-deep blockquote {
+        margin: 8px 0;
+        padding: 0 10px;
+        border-left: 4px solid #ccc;
+        color: #bbb;
+    }
+
+    ::v-deep a {
+      color: #4da6ff;
+    }
+  }
+}
+
+/* 代码块行号样式 */
+::v-deep .up-markdown-line-numbers {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding-right: 10px;
+  margin-right: 10px;
+  border-right: 1px solid #ddd;
+  user-select: none;
+
+  .up-markdown-line-number {
+    color: #999;
+    font-size: 14px;
+    line-height: 1.6;
+  }
+}
+</style>

package/components/up-message-input/up-message-input.uvue

@@ -0,0 +1,113 @@
+<template>
+	<up-code-input
+		:maxlength="maxlength"
+		:dot="dotFill"
+		:mode="codeInputMode"
+		:model-value="currentValue"
+		:focus="focus"
+		:bold="bold"
+		:font-size="fontSize"
+		:color="inactiveColor"
+		:size="width"
+		:disabled-keyboard="disabledKeyboard"
+		:border-color="activeBorderColor"
+		@change="onChange"
+		@finish="onFinish"
+		@update:modelValue="onModelValueUpdate"
+	></up-code-input>
+</template>
+
+<script setup lang="uts">
+	import { computed } from 'vue'
+
+	function stringValue(value: any | null): string {
+		return value == null ? '' : value.toString()
+	}
+
+	defineOptions({
+		styleIsolation: 'app-and-page',
+		name: 'up-message-input'
+	})
+
+	const props = defineProps({
+		maxlength: {
+			type: [Number, String],
+			default: 4
+		},
+		dotFill: {
+			type: Boolean,
+			default: false
+		},
+		mode: {
+			type: String,
+			default: 'box'
+		},
+		modelValue: {
+			type: [String, Number],
+			default: ''
+		},
+		value: {
+			type: [String, Number],
+			default: ''
+		},
+		breathe: {
+			type: Boolean,
+			default: true
+		},
+		focus: {
+			type: Boolean,
+			default: false
+		},
+		bold: {
+			type: Boolean,
+			default: false
+		},
+		fontSize: {
+			type: [String, Number],
+			default: 60
+		},
+		activeColor: {
+			type: String,
+			default: '#2979ff'
+		},
+		inactiveColor: {
+			type: String,
+			default: '#606266'
+		},
+		width: {
+			type: [Number, String],
+			default: '80'
+		},
+		disabledKeyboard: {
+			type: Boolean,
+			default: false
+		}
+	})
+
+	const emit = defineEmits(['change', 'finish', 'update:modelValue'])
+
+	const currentValue = computed((): string => {
+		const modelText = stringValue(props.modelValue)
+		return modelText.length > 0 ? modelText : stringValue(props.value)
+	})
+
+	const codeInputMode = computed((): string => {
+		return props.mode == 'box' ? 'box' : 'line'
+	})
+
+	const activeBorderColor = computed((): string => {
+		return props.mode == 'box' ? props.activeColor : props.inactiveColor
+	})
+
+	const onChange = (value: string): void => {
+		emit('change', value)
+	}
+
+	const onFinish = (value: string): void => {
+		emit('finish', value)
+	}
+
+	const onModelValueUpdate = (value: string): void => {
+		emit('update:modelValue', value)
+	}
+</script>

package/components/up-message-input/up-message-input.vue

@@ -0,0 +1,111 @@
+<template>
+	<up-code-input
+		:maxlength="maxlength"
+		:dot="dotFill"
+		:mode="codeInputMode"
+		:model-value="currentValue"
+		:focus="focus"
+		:bold="bold"
+		:font-size="fontSize"
+		:color="inactiveColor"
+		:size="width"
+		:disabled-keyboard="disabledKeyboard"
+		:border-color="activeBorderColor"
+		@change="onChange"
+		@finish="onFinish"
+		@update:modelValue="onModelValueUpdate"
+	></up-code-input>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { commonProps } from '../../libs/composable/useUltraUI.js'
+
+defineOptions({
+	name: 'up-message-input',
+	// #ifdef MP-WEIXIN
+	options: {
+		virtualHost: true
+	}
+	// #endif
+})
+
+const props = defineProps({
+	...commonProps,
+	maxlength: {
+		type: [Number, String],
+		default: 4
+	},
+	dotFill: {
+		type: Boolean,
+		default: false
+	},
+	mode: {
+		type: String,
+		default: 'box'
+	},
+	modelValue: {
+		type: [String, Number],
+		default: ''
+	},
+	value: {
+		type: [String, Number],
+		default: ''
+	},
+	breathe: {
+		type: Boolean,
+		default: true
+	},
+	focus: {
+		type: Boolean,
+		default: false
+	},
+	bold: {
+		type: Boolean,
+		default: false
+	},
+	fontSize: {
+		type: [String, Number],
+		default: 60
+	},
+	activeColor: {
+		type: String,
+		default: '#2979ff'
+	},
+	inactiveColor: {
+		type: String,
+		default: '#606266'
+	},
+	width: {
+		type: [Number, String],
+		default: '80'
+	},
+	disabledKeyboard: {
+		type: Boolean,
+		default: false
+	}
+})
+const emit = defineEmits(['change', 'finish', 'update:modelValue'])
+
+const currentValue = computed(() => {
+	const modelText = props.modelValue == null ? '' : props.modelValue.toString()
+	return modelText.length > 0 ? modelText : (props.value == null ? '' : props.value.toString())
+})
+const codeInputMode = computed(() => {
+	return props.mode == 'box' ? 'box' : 'line'
+})
+const activeBorderColor = computed(() => {
+	return props.mode == 'box' ? props.activeColor : props.inactiveColor
+})
+
+function onChange(value) {
+	emit('change', value)
+}
+function onFinish(value) {
+	emit('finish', value)
+}
+function onModelValueUpdate(value) {
+	emit('update:modelValue', value)
+}
+</script>
+

package/components/up-modal/modal.js

@@ -0,0 +1,36 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 3.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2021-08-20 17:15:59
+ * @FilePath     : /uview-pluis/libs/config/props/modal.js
+ */
+import { t } from '../../libs/i18n/index.js'
+export default {
+    // modal 组件
+    modal: {
+        show: false,
+        title: '',
+        content: '',
+        confirmText: t("up.common.confirm"),
+        cancelText: t("up.common.cancel"),
+        showConfirmButton: true,
+        showCancelButton: false,
+        confirmColor: '#2979ff',
+        cancelColor: '#606266',
+        buttonReverse: false,
+        zoom: true,
+        asyncClose: false,
+        closeOnClickOverlay: false,
+        negativeTop: 0,
+        width: '650rpx',
+        confirmButtonShape: '',
+        duration: 400,
+        contentTextAlign: 'left',
+        asyncCloseTip: t("up.common.inOperation") + '...',
+        asyncCancelClose: false,
+        contentStyle: {}
+    }
+}

package/components/up-modal/modal.uts

@@ -0,0 +1,36 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2021-08-20 17:15:59
+ * @FilePath     : /uview-pluis/libs/config/props/modal.uts
+ */
+import { t } from '../../libs/i18n'
+export default {
+    // modal 组件
+    modal: {
+        show: false,
+        title: '',
+        content: '',
+        confirmText: t("up.common.confirm"),
+        cancelText: t("up.common.cancel"),
+        showConfirmButton: true,
+        showCancelButton: false,
+        confirmColor: '#2979ff',
+        cancelColor: '#606266',
+        buttonReverse: false,
+        zoom: true,
+        asyncClose: false,
+        closeOnClickOverlay: false,
+        negativeTop: 0,
+        width: '650rpx',
+        confirmButtonShape: '',
+        duration: 400,
+        contentTextAlign: 'left',
+        asyncCloseTip: t("up.common.inOperation") + '...',
+        asyncCancelClose: false,
+        contentStyle: {}
+    }
+} as UTSJSONObject

package/components/up-modal/props.js

@@ -0,0 +1,111 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 是否展示modal
+        show: {
+            type: Boolean,
+            default: () => defProps.modal.show
+        },
+        // 标题
+        title: {
+            type: [String],
+            default: () => defProps.modal.title
+        },
+        // 弹窗内容
+        content: {
+            type: String,
+            default: () => defProps.modal.content
+        },
+        // 确认文案
+        confirmText: {
+            type: String,
+            default: () => defProps.modal.confirmText
+        },
+        // 取消文案
+        cancelText: {
+            type: String,
+            default: () => defProps.modal.cancelText
+        },
+        // 是否显示确认按钮
+        showConfirmButton: {
+            type: Boolean,
+            default: () => defProps.modal.showConfirmButton
+        },
+        // 是否显示取消按钮
+        showCancelButton: {
+            type: Boolean,
+            default: () => defProps.modal.showCancelButton
+        },
+        // 确认按钮颜色
+        confirmColor: {
+            type: String,
+            default: () => defProps.modal.confirmColor
+        },
+        // 取消文字颜色
+        cancelColor: {
+            type: String,
+            default: () => defProps.modal.cancelColor
+        },
+        // 对调确认和取消的位置
+        buttonReverse: {
+            type: Boolean,
+            default: () => defProps.modal.buttonReverse
+        },
+        // 是否开启缩放效果
+        zoom: {
+            type: Boolean,
+            default: () => defProps.modal.zoom
+        },
+        // 是否异步关闭，只对确定按钮有效
+        asyncClose: {
+            type: Boolean,
+            default: () => defProps.modal.asyncClose
+        },
+        // 是否允许点击遮罩关闭modal
+        closeOnClickOverlay: {
+            type: Boolean,
+            default: () => defProps.modal.closeOnClickOverlay
+        },
+        // 给一个负的margin-top，往上偏移，避免和键盘重合的情况
+        negativeTop: {
+            type: [String, Number],
+            default: () => defProps.modal.negativeTop
+        },
+        // modal宽度，不支持百分比，可以数值，px，rpx单位
+        width: {
+            type: [String, Number],
+            default: () => defProps.modal.width
+        },
+        // 确认按钮的样式，circle-圆形，square-方形，如设置，将不会显示取消按钮
+        confirmButtonShape: {
+            type: String,
+            default: () => defProps.modal.confirmButtonShape
+        },
+        // 弹窗动画过度时间
+        duration: {
+            type: [Number],
+            default: defProps.modal.duration
+        },
+        // 文案对齐方式
+        contentTextAlign: {
+            type: String,
+            default: () => defProps.modal.contentTextAlign
+        },
+        // 异步确定时如果点击了取消时候的提示文案
+        asyncCloseTip: {
+            type: String,
+            default: () => defProps.modal.asyncCloseTip
+        },
+        // 是否异步关闭，只对取消按钮有效
+        asyncCancelClose: {
+            type: Boolean,
+            default: () => defProps.modal.asyncCancelClose
+        },
+        // 内容样式
+        contentStyle: {
+            type: Object,
+            default: () => defProps.modal.contentStyle
+        }
+    }
+})