Skip to content

Commit

Permalink
界面修改
Browse files Browse the repository at this point in the history
  • Loading branch information
@tyy-sss
tyy-sss committed Apr 14, 2024
1 parent b1ba108 commit 46b35f0
Show file tree
Hide file tree
Showing 11 changed files with 1,359 additions and 1,128 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"axios": "^1.6.7",
"core-js": "^3.8.3",
"font-awesome": "^4.7.0",
"jszip": "^3.10.1",
"lodash": "^4.17.21",
"marked": "^12.0.1",
"mockjs": "^1.1.0",
Expand Down
36 changes: 30 additions & 6 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

143 changes: 76 additions & 67 deletions src/component/Article.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,90 +5,99 @@
</div>
</template>

<script setup >
import { ref, reactive, toRefs, onBeforeMount, onMounted, watchEffect, computed } from 'vue';
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
import showdown from 'showdown';
import showdownKatex from 'showdown-katex';
<script setup>
import {
ref,
reactive,
toRefs,
onBeforeMount,
onMounted,
watchEffect,
computed,
} from "vue";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
import showdown from "showdown";
import showdownKatex from "showdown-katex";
const props = defineProps({
title: { type:String },
value: { type: String },
class: { type: String },
title: { type: String },
value: { type: String },
class: { type: String },
});
const data = reactive({})
const data = reactive({});
function transformMsg(msgInfo = '') {
msgInfo = msgInfo.replaceAll('<br />', '\n'); // 一些处理
let converter = new showdown.Converter({
// 详细配置见：https://github.com/showdownjs/showdown#valid-options
tables: true, // 支持table语法
simpleLineBreaks: true,
strikethrough: true, // 将~~strikethrough~~ 识别为 <del>strikethrough</del>
underline: true, // __test__中的下划线不识别为<em> 和 <strong>
extensions: [
showdownKatex({
// 使用方式见：https://obedm503.github.io/showdown-katex
// 详细配置见：https://katex.org/docs/options.html
throwOnError: false, // 公式有错时，是否抛出错误
displayMode: false, // 如果为false，公式以inline方式渲染
delimiters: [
{ left: '$$', right: '$$', display: true },
{ left: '$', right: '$', display: false },
{ left: '~', right: '~', display: false, asciimath: true },
],
}),
function transformMsg(msgInfo = "") {
msgInfo = msgInfo.replaceAll("<br />", "\n"); // 一些处理
let converter = new showdown.Converter({
// 详细配置见：https://github.com/showdownjs/showdown#valid-options
tables: true, // 支持table语法
simpleLineBreaks: true,
strikethrough: true, // 将~~strikethrough~~ 识别为 <del>strikethrough</del>
underline: true, // __test__中的下划线不识别为<em> 和 <strong>
extensions: [
showdownKatex({
// 使用方式见：https://obedm503.github.io/showdown-katex
// 详细配置见：https://katex.org/docs/options.html
throwOnError: false, // 公式有错时，是否抛出错误
displayMode: false, // 如果为false，公式以inline方式渲染
delimiters: [
{ left: "$$", right: "$$", display: true },
{ left: "$", right: "$", display: false },
{ left: "~", right: "~", display: false, asciimath: true },
],
});
return converter.makeHtml(msgInfo);
}),
],
});
return converter.makeHtml(msgInfo);
}
onBeforeMount(() => {
//console.log('2.组件挂载页面之前执行----onBeforeMount')
})
});
onMounted(() => {
//console.log('3.-组件挂载到页面之后执行-------onMounted')
})
watchEffect(()=>{
})
});
watchEffect(() => {});
// 使用toRefs解构
// let { } = { ...toRefs(data) }
// let { } = { ...toRefs(data) }
defineExpose({
...toRefs(data)
})
...toRefs(data),
});
</script>
<style scoped lang='less'>
.content{
width:100%;
h1{
text-align: center;
line-height: 1.5rem;
}
<style scoped lang="less">
.content {
width: 100%;
h1 {
text-align: center;
line-height: 1.5rem;
}
}
.katex-html {
display: none;
}
display: none;
}
.markdown-viewer {
line-height: 0.32rem;
font-size:0.2rem;
td {
border: 1px solid #dfe2e5;
padding: 5px;
}
th {
border: 1px solid #dfe2e5;
padding: 5px;
text-align: center;
}
tr:nth-child(2n-1) {
background-color: #fafbfc;
}
line-height: 0.32rem;
font-size: 0.2rem;
td {
border: 1px solid #dfe2e5;
padding: 5px;
}
th {
border: 1px solid #dfe2e5;
padding: 5px;
text-align: center;
}
tr:nth-child(2n-1) {
background-color: #fafbfc;
}
}
::v-deep(.markdown-viewer pre) {
white-space: pre-wrap;
word-wrap: break-word;
}
::v-deep(.markdown-viewer pre){
white-space: pre-wrap;
word-wrap: break-word;
::v-deep(.markdown-viewer img) {
width: 13.8rem;
}
</style>
</style>
34 changes: 17 additions & 17 deletions src/component/Comment.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,23 +170,23 @@ const replyPage = ({ parentId, pageNum, pageSize, finish }: ReplyPageParamApi) =
}, 200)
}
config.comments = [
{
id: '1',
parentId: null,
uid: '1',
address: '来自上海',
content:
'缘生缘灭，缘起缘落，我在看别人的故事，别人何尝不是在看我的故事?别人在演绎人生，我又何尝不是在这场戏里?谁的眼神沧桑了谁?我的眼神，只是沧桑了自己[喝酒]',
likes: 2,
contentImg: 'https://gitee.com/undraw/undraw-ui/raw/master/public/docs/normal.webp',
createTime: dayjs().subtract(10, 'minute').toString(),
user: {
username: '落尘',
avatar: 'https://static.juzicon.com/avatars/avatar-200602130320-HMR2.jpeg?x-oss-process=image/resize,w_100',
level: 6,
homeLink: '/1'
}
}
// {
// id: '1',
// parentId: null,
// uid: '1',
// address: '来自上海',
// content:
// '缘生缘灭，缘起缘落，我在看别人的故事，别人何尝不是在看我的故事?别人在演绎人生，我又何尝不是在这场戏里?谁的眼神沧桑了谁?我的眼神，只是沧桑了自己[喝酒]',
// likes: 2,
// contentImg: 'https://gitee.com/undraw/undraw-ui/raw/master/public/docs/normal.webp',
// createTime: dayjs().subtract(10, 'minute').toString(),
// user: {
// username: '落尘',
// avatar: 'https://static.juzicon.com/avatars/avatar-200602130320-HMR2.jpeg?x-oss-process=image/resize,w_100',
// level: 6,
// homeLink: '/1'
// }
// }
]
const reply = {
total: 6,
Expand Down
Loading

0 comments on commit 46b35f0

Please sign in to comment.