flat: 优化语音

components/FadeView/FadeView.vue

@@ -1,45 +0,0 @@
-<template>
-    <view v-show="internalShow" :style="fadeStyle" class="fade-wrapper">
-        <slot />
-    </view>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue';
-
-const props = defineProps({
-    show: { type: Boolean, default: false },
-    duration: { type: Number, default: 300 }, // ms
-});
-
-const internalShow = ref(props.show);
-const fadeStyle = ref({
-    opacity: props.show ? 1 : 0,
-    transition: `opacity ${props.duration}ms ease`,
-});
-
-watch(
-    () => props.show,
-    (val) => {
-        if (val) {
-            internalShow.value = true;
-            requestAnimationFrame(() => {
-                fadeStyle.value.opacity = 1;
-            });
-        } else {
-            fadeStyle.value.opacity = 0;
-            // 动画结束后隐藏 DOM
-            setTimeout(() => {
-                internalShow.value = false;
-            }, props.duration);
-        }
-    }
-);
-</script>
-
-<style scoped>
-.fade-wrapper {
-    width: 100%;
-    height: 100%;
-}
-</style>

components/MsgTips/MsgTips.vue

@@ -0,0 +1,140 @@
+<template>
+    <uni-popup
+        ref="popup"
+        type="center"
+        borderRadius="10px 10px 10px 10px"
+        background-color="#F6F6F6"
+        :mask-click="maskClick"
+    >
+        <view class="popup-content">
+            <view class="text-h2">
+                <image v-if="icon" class="text-h2-icon" :src="icon"></image>
+                {{ title }}
+            </view>
+            <text class="text-content button-click">{{ content }}</text>
+            <template v-if="showButton">
+                <uni-button class="popup-button button-click" v-if="isTip" @click="close">{{ buttonText }}</uni-button>
+                <view v-else class="confirm-btns">
+                    <uni-button class="popup-button button-click" @click="close">{{ cancelText }}</uni-button>
+                    <uni-button class="popup-button button-click" @click="confirm">{{ confirmText }}</uni-button>
+                </view>
+            </template>
+        </view>
+    </uni-popup>
+</template>
+
+<script>
+export default {
+    name: 'MsgTips',
+    props: {
+        icon: {
+            type: String,
+            default: '', // 如：'/static/success.png'
+        },
+        title: {
+            type: String,
+            default: '提示',
+        },
+        content: {
+            type: String,
+            default: '这是提示内容',
+        },
+        buttonText: {
+            type: String,
+            default: '我知道了',
+        },
+        cancelText: {
+            type: String,
+            default: '取消',
+        },
+        confirmText: {
+            type: String,
+            default: '保存并退出',
+        },
+        showButton: {
+            type: Boolean,
+            default: true,
+        },
+        maskClosable: {
+            type: Boolean,
+            default: true,
+        },
+        isTip: {
+            type: Boolean,
+            default: true,
+        },
+        maskClick: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data() {
+        return {};
+    },
+    // mounted() {
+    //     this.$refs.popup.open('center');
+    // },
+    methods: {
+        open() {
+            this.$refs.popup.open('center');
+        },
+        close() {
+            this.$refs.popup.close('center');
+        },
+        confirm() {},
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.popup-content {
+    display: flex;
+    padding: 40rpx;
+    flex-direction: column;
+    justify-content: space-between;
+    width: calc(630rpx - 80rpx);
+    .text-h2 {
+        font-weight: 500;
+        font-size: 36rpx;
+        color: #333333;
+        line-height: 42rpx;
+        display: flex;
+        align-items: center;
+    }
+    .text-h2-icon {
+        width: 40rpx;
+        height: 40rpx;
+        margin-right: 12rpx;
+    }
+    .text-content {
+        margin-top: 12rpx;
+        font-weight: 400;
+        font-size: 28rpx;
+        color: #6c7282;
+        line-height: 33rpx;
+        text-align: justified;
+    }
+    .popup-button {
+        background-color: #256bfa;
+        color: white;
+        border-radius: 30px;
+        text-align: center;
+        height: 90rpx;
+        line-height: 90rpx;
+        border-radius: 12rpx 12rpx 12rpx 12rpx;
+        margin-top: 48rpx;
+        width: 100%;
+    }
+    .confirm-btns {
+        display: flex;
+        .popup-button {
+            width: 260rpx;
+        }
+        .popup-button:first-child {
+            background-color: #e8eaee;
+            margin-right: 30rpx;
+            color: #333333;
+        }
+    }
+}
+</style>

components/md-render/md-render.vue

@@ -1,6 +1,7 @@
 <template>
     <view class="markdown-body">
         <rich-text class="markdownRich" id="markdown-content" :nodes="renderedHtml" @itemclick="handleItemClick" />
+        <!-- <view class="markdown-body" v-html="renderedHtml"></view> -->
     </view>
 </template>
 
@@ -72,15 +73,37 @@ const handleItemClick = (e) => {
         padding-inline-start: 40rpx;
         li {
             margin-bottom: -30rpx;
+            display: list-item;
+            list-style-position: outside; /* 确保数字/点在左侧 */
+            word-break: break-word;
+            p {
+                display: inline;
+                margin: 0;
+                padding: 0;
+            }
         }
-
         li:nth-child(1) {
-            margin-top: -40rpx;
+            margin-top: -20rpx;
+        }
+    }
+    ol {
+        li {
+            display: list-item;
+            list-style-position: outside; /* 确保数字/点在左侧 */
+            word-break: break-word;
+            p {
+                display: inline;
+                margin: 0;
+                padding: 0;
+            }
+        }
+        li:nth-child(1) {
+            margin-top: -20rpx;
         }
     }
     p {
         font-weight: 500;
-        line-height: 44.8rpx;
+        line-height: 1.5;
     }
 }
 .markdown-body {
@@ -233,7 +256,7 @@ ol {
     box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
     border-radius: 20rpx 20rpx 20rpx 20rpx;
     padding: 28rpx 24rpx;
-    font-weight: 500;
+    font-weight: 400;
     font-size: 28rpx;
     color: #333333;
     margin-bottom: 20rpx;
@@ -244,49 +267,66 @@ ol {
         font-weight: 600;
         display: flex;
         align-items: center;
+        justify-content: space-between
         .title-text
             max-width: calc(100% - 160rpx);
             overflow: hidden
             text-overflow: ellipsis
-        .card-tag
-            font-weight: 500;
-            font-size: 24rpx;
-            color: #333333;
-            width: fit-content;
-            background: #F4F4F4;
-            border-radius: 4rpx 4rpx 4rpx 4rpx;
-            padding: 0rpx 20rpx;
-            margin-left: 16rpx;
+            font-size: 30rpx
+        .card-salary
+            font-size: 28rpx;
+            color: #FF6E1C;
+
     .card-company
-        margin-top: 12rpx;
+        margin-top: 16rpx;
+        max-width: calc(100%);
+        overflow: hidden;
+        text-overflow: ellipsis
+        color: #6C7282;
     .card-info
-        margin-top: 12rpx;
+        margin-top: 22rpx;
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding-right: 40rpx;
+        .info-item
+            display: flex;
+            position: relative;
+            align-items: center;
+            color: #256BFA;
+            font-size: 28rpx;
+            padding-right: 10rpx
     .position-nav
         position: absolute;
-        right: 34rpx;
+        right: -10rpx;
         top: 50%;
     .position-nav::before
         position: absolute;
         left: 0;
-        top: 0;
+        top: -4rpx;
         content: '';
         width: 4rpx;
         height: 16rpx;
         border-radius: 2rpx
-        background: #8A8A8A;
+        background: #256BFA;
         transform: translate(0, -50%) rotate(-45deg) ;
     .position-nav::after
         position: absolute;
         left: 0;
-        top: 0;
+        top: -4rpx;
         content: '';
         width: 4rpx;
         height: 16rpx;
         border-radius: 2rpx
-        background: #8A8A8A;
+        background: #256BFA;
         transform: rotate(45deg)
+    .card-tag
+        font-weight: 500;
+        font-size: 24rpx;
+        color: #333333;
+        width: fit-content;
+        background: #F4F4F4;
+        border-radius: 4rpx 4rpx 4rpx 4rpx;
+        padding: 4rpx 20rpx;
+        margin-right: 16rpx;
 </style>