修改编辑器排版；
添加编辑器表格和突出样式； 测试点赞。
This commit is contained in:
parent
bf53bd8bb9
commit
7d7e2ccf87
@ -48,16 +48,18 @@ onMounted(async () => {
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
<style>
|
||||
.renderer-container {
|
||||
font-family: Arial, sans-serif;
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
.renderer-container h1,
|
||||
.renderer-container h2,
|
||||
.renderer-container h3 {
|
||||
color: #333;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.renderer-container p {
|
||||
@ -65,23 +67,122 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
.renderer-container code {
|
||||
background-color: #f4f4f4;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !important;
|
||||
font-weight: 500;
|
||||
background-color: #333;
|
||||
color: #f1f1f1;
|
||||
padding: .15rem .3rem;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.renderer-container pre {
|
||||
background-color: #f4f4f4;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.renderer-container hr {
|
||||
width: 80%;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: linear-gradient(to bottom, rgba(217, 217, 217, 0.6), rgba(114, 114, 114, 0.6));
|
||||
background: linear-gradient(to bottom, rgba(217, 217, 217, 0.34), rgba(114, 114, 114, 0.32));
|
||||
margin: 20px 0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.renderer-container table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.renderer-container th,
|
||||
.renderer-container td {
|
||||
padding: 0.8rem;
|
||||
text-align: left;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
|
||||
.renderer-container th {
|
||||
background-color: #333;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.renderer-container tr:nth-child(even) {
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
|
||||
.renderer-container tr:hover {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.renderer-container td {
|
||||
background-color: #222;
|
||||
color: #f0f0f0;
|
||||
}
|
||||
.theme-light .renderer-container {
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.theme-light .renderer-container h1,
|
||||
.theme-light .renderer-container h2,
|
||||
.theme-light .renderer-container h3 {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.theme-light .renderer-container p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.theme-light .renderer-container code {
|
||||
background-color: #f4f4f4;
|
||||
color: #333;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.theme-light .renderer-container pre {
|
||||
background-color: #f4f4f4;
|
||||
color: #333;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.theme-light .renderer-container table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.theme-light .renderer-container th,
|
||||
.theme-light .renderer-container td {
|
||||
padding: 0.8rem;
|
||||
text-align: left;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.theme-light .renderer-container th {
|
||||
background-color: #f4f4f4;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.theme-light .renderer-container tr:nth-child(even) {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.theme-light .renderer-container tr:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.theme-light .renderer-container td {
|
||||
background-color: #fff;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import {onMounted, ref, watch} from "vue";
|
||||
import {ref, watch} from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
active: {
|
||||
@ -18,9 +18,30 @@ const props = defineProps({
|
||||
|
||||
const alterActive = ref(props.active);
|
||||
const alterAmount = ref(props.amount);
|
||||
const tgFunc = debounce(props.toggleFunc, 700);
|
||||
let activeTemp = null;
|
||||
|
||||
const clickFunc = async () => {
|
||||
function debounce(func, delay) {
|
||||
let timer;
|
||||
return function(...args) {
|
||||
// 每次触发事件时清除上一次的定时器
|
||||
clearTimeout(timer);
|
||||
// 设置新的定时器，延迟执行
|
||||
timer = setTimeout(() => {
|
||||
if (activeTemp === alterActive.value) {
|
||||
return;
|
||||
}
|
||||
activeTemp = null;
|
||||
func.apply(this, args);
|
||||
}, delay);
|
||||
};
|
||||
}
|
||||
|
||||
const clickFunc = () => {
|
||||
setTimeout(async () => {
|
||||
if (activeTemp === null) {
|
||||
activeTemp = alterActive.value;
|
||||
}
|
||||
if (alterActive.value === null) {
|
||||
alterActive.value = !props.active;
|
||||
} else {
|
||||
@ -35,9 +56,8 @@ const clickFunc = async () => {
|
||||
alterAmount.value = props.amount;
|
||||
}
|
||||
if (props.toggleFunc) {
|
||||
await props.toggleFunc();
|
||||
tgFunc(alterActive.value);
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
@ -51,13 +71,13 @@ watch(() => props.amount, () => {
|
||||
<label class="like">
|
||||
<button @click="clickFunc">
|
||||
<svg v-if="!(alterActive)" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"
|
||||
viewBox="0 0 16 16"
|
||||
width="16" height="16">
|
||||
<path
|
||||
d="M9.283433333333333 2.0303066666666663C9.095466666666667 2.0083933333333333 8.921333333333333 2.09014 8.828166666666666 2.1991199999999997C8.424633333333333 2.6711333333333336 8.332133333333333 3.3649466666666665 8.029333333333334 3.9012466666666663C7.630633333333333 4.607453333333333 7.258833333333333 5.034486666666666 6.800866666666666 5.436006666666666C6.42382 5.7665733333333336 6.042199999999999 5.987959999999999 5.666666666666666 6.09112L5.666666666666666 13.1497C6.19062 13.1611 6.751966666666666 13.168333333333333 7.333333333333333 13.168333333333333C8.831233333333333 13.168333333333333 10.1019 13.120766666666665 10.958166666666665 13.076699999999999C11.565133333333332 13.045433333333332 12.091966666666666 12.7451 12.366466666666668 12.256733333333333C12.7516 11.571599999999998 13.2264 10.5669 13.514166666666664 9.3835C13.7823 8.2808 13.904599999999999 7.374333333333333 13.959466666666666 6.734999999999999C13.984933333333332 6.438646666666667 13.750433333333334 6.166686666666667 13.386666666666665 6.166686666666667L10.065133333333332 6.166686666666667C9.898433333333333 6.166686666666667 9.742666666666667 6.08362 9.649833333333333 5.945166666666666C9.536066666666667 5.775493333333333 9.560033333333333 5.5828533333333334 9.6312 5.403346666666666C9.783966666666666 5.013846666666666 9.983933333333333 4.432846666666666 10.062766666666667 3.90454C10.1406 3.3830066666666667 10.121599999999999 2.9639466666666667 9.917133333333332 2.57626C9.697399999999998 2.1596933333333332 9.448266666666665 2.0495266666666665 9.283433333333333 2.0303066666666663zM10.773433333333333 5.166686666666666L13.386666666666665 5.166686666666666C14.269133333333333 5.166686666666666 15.036999999999999 5.875273333333333 14.9558 6.8206C14.897 7.505533333333333 14.767199999999999 8.462733333333333 14.485833333333334 9.6198C14.170333333333334 10.917200000000001 13.6532 12.008466666666665 13.238166666666666 12.746766666666666C12.7729 13.574433333333333 11.910266666666667 14.029 11.009566666666666 14.075366666666667C10.14 14.120166666666666 8.851766666666666 14.168333333333333 7.333333333333333 14.168333333333333C5.862206666666666 14.168333333333333 4.51776 14.1231 3.565173333333333 14.079633333333334C2.4932333333333334 14.030733333333332 1.5939999999999999 13.234466666666666 1.4786599999999999 12.143466666666665C1.4028 11.426066666666665 1.3333333333333333 10.4978 1.3333333333333333 9.501666666666665C1.3333333333333333 8.588966666666666 1.3916466666666667 7.761233333333333 1.4598999999999998 7.104466666666667C1.5791666666666666 5.95696 2.5641 5.166686666666666 3.671693333333333 5.166686666666666L5.166666666666666 5.166686666666666C5.3793066666666665 5.166686666666666 5.709213333333333 5.063186666666667 6.141613333333333 4.68408C6.516733333333333 4.355193333333333 6.816366666666667 4.015666666666666 7.158533333333333 3.409613333333333C7.5023 2.8007333333333335 7.6041 2.0920066666666663 8.068066666666667 1.54932C8.372133333333332 1.1936466666666665 8.8718 0.9755333333333334 9.399233333333333 1.03704C9.949866666666665 1.10124 10.457733333333334 1.4577866666666666 10.801633333333331 2.109713333333333C11.148866666666665 2.767993333333333 11.143799999999999 3.4356599999999995 11.051833333333335 4.0520933333333335C10.993899999999998 4.44022 10.875366666666666 4.852359999999999 10.773433333333333 5.166686666666666zM4.666666666666666 13.122166666666667L4.666666666666666 6.166686666666667L3.671693333333333 6.166686666666667C3.029613333333333 6.166686666666667 2.5161533333333335 6.615046666666666 2.4545466666666664 7.207833333333333C2.3890599999999997 7.837933333333333 2.333333333333333 8.630433333333333 2.333333333333333 9.501666666666665C2.333333333333333 10.453433333333333 2.399833333333333 11.345266666666667 2.473113333333333 12.038333333333334C2.533993333333333 12.614133333333331 3.0083466666666667 13.053199999999999 3.6107466666666665 13.0807C3.9228066666666668 13.094899999999999 4.278173333333333 13.109333333333334 4.666666666666666 13.122166666666667z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
<svg v-else xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
|
||||
<svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16"
|
||||
viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.545733333333333 5.166653333333333L10.511766666666666 5.166653333333333C10.658033333333332 4.851813333333333 10.821733333333334 4.440706666666666 10.880833333333332 4.044453333333333C10.923233333333332 3.760413333333333 10.927266666666664 3.412493333333333 10.893133333333333 3.0813333333333333C10.859833333333334 2.7581999999999995 10.784866666666666 2.3969066666666663 10.6352 2.1132133333333334C10.318299999999999 1.5124266666666666 9.882166666666667 1.09052 9.357366666666666 0.9881599999999999C8.799166666666666 0.8792866666666665 8.318566666666666 1.1633 8.030966666666666 1.59852C7.7904333333333335 1.9625133333333333 7.6966 2.26618 7.611066666666667 2.5431266666666668L7.608366666666666 2.5519066666666665C7.526133333333332 2.817973333333333 7.4452333333333325 3.07934 7.237266666666667 3.4476933333333335C6.895133333333334 4.053713333333333 6.615993333333333 4.36802 6.240833333333333 4.69694C6.046326666666666 4.867473333333333 5.84366 4.974753333333333 5.666666666666666 5.03686L5.666666666666666 14.149866666666664C6.190953333333333 14.161133333333334 6.752166666666666 14.168266666666668 7.333333333333333 14.168266666666668C8.896066666666666 14.168266666666668 10.214966666666665 14.117266666666666 11.084633333333333 14.071433333333333C11.938133333333333 14.026433333333333 12.754100000000001 13.5962 13.1998 12.814466666666664C13.621066666666666 12.075666666666665 14.160633333333333 10.9572 14.485833333333334 9.619766666666667C14.7904 8.367233333333333 14.9174 7.348799999999999 14.968999999999998 6.656493333333334C15.032466666666666 5.8043733333333325 14.340166666666665 5.166653333333333 13.545733333333333 5.166653333333333zM4.666666666666666 14.122666666666667L4.666666666666666 5.166653333333333L3.5348733333333335 5.166653333333333C2.506193333333333 5.166653333333333 1.591813333333333 5.90056 1.4747533333333334 6.9655C1.4003066666666666 7.642799999999999 1.3333333333333333 8.523499999999999 1.3333333333333333 9.5016C1.3333333333333333 10.559333333333333 1.4116666666666666 11.540700000000001 1.4928399999999997 12.274533333333332C1.6048399999999998 13.287066666666664 2.43944 14.026599999999998 3.4350066666666668 14.073566666666666C3.78952 14.0903 4.205413333333333 14.107633333333332 4.666666666666666 14.122666666666667z"
|
||||
@ -71,6 +91,7 @@ watch(() => props.amount, () => {
|
||||
<style scoped>
|
||||
label {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.like {
|
||||
|
||||
@ -7,9 +7,9 @@ import store from "../../../store/index.js";
|
||||
import swal from "../../../utils/sweetalert.js";
|
||||
import AuthService from "../../../../services/auth.js";
|
||||
|
||||
const messages = ref(store.state.demos.board?.messages || []);
|
||||
const amount = ref(store.state.demos.board?.amount || 0);
|
||||
const currentPage = ref(store.state.demos.board?.currentPage || 1);
|
||||
const messages = ref(store.state.demosLocal.board?.messages || []);
|
||||
const amount = ref(store.state.demosLocal.board?.amount || 0);
|
||||
const currentPage = ref(store.state.demosLocal.board?.currentPage || 1);
|
||||
|
||||
const pageLoading = ref(false);
|
||||
const sendCD = ref(0);
|
||||
@ -44,8 +44,8 @@ async function refreshBoard(page, pageSize) {
|
||||
return msg;})
|
||||
messages.value = res.data;
|
||||
amount.value = Math.ceil(res.amount / pageSize);
|
||||
store.commit('setDemoValue', {demo: 'board', value: {messages: messages.value}});
|
||||
store.commit('setDemoValue', {demo: 'board', value: {amount: amount.value}});
|
||||
store.commit('setLocalDemoValue', {demo: 'board', value: {messages: messages.value}});
|
||||
store.commit('setLocalDemoValue', {demo: 'board', value: {amount: amount.value}});
|
||||
})
|
||||
} catch {
|
||||
return 1;
|
||||
@ -58,7 +58,7 @@ async function goPage(page) {
|
||||
pageLoading.value = true;
|
||||
currentPage.value = page;
|
||||
if (await refreshBoard(page) === 0) {
|
||||
store.commit('setDemoValue', {demo: 'board', value: {currentPage: page}});
|
||||
store.commit('setLocalDemoValue', {demo: 'board', value: {currentPage: page}});
|
||||
pageLoading.value = false;
|
||||
return;
|
||||
}
|
||||
@ -87,7 +87,7 @@ async function sendMessage() {
|
||||
}
|
||||
userInput.value = '';
|
||||
sendCD.value = 5;
|
||||
store.commit('setDemoValue', {demo: 'board', value: { sendCD: sendCD.value }});
|
||||
store.commit('setLocalDemoValue', {demo: 'board', value: { sendCD: sendCD.value }});
|
||||
await refreshBoard();
|
||||
return;
|
||||
} catch {
|
||||
@ -111,7 +111,7 @@ function startCountdown() {
|
||||
interval = setInterval(() => {
|
||||
if (sendCD.value > 0) {
|
||||
sendCD.value--;
|
||||
store.commit('setDemoValue', {demo: 'board', value: { sendCD: sendCD.value }});
|
||||
store.commit('setLocalDemoValue', {demo: 'board', value: { sendCD: sendCD.value }});
|
||||
} else {
|
||||
clearInterval(interval);
|
||||
interval = null;
|
||||
@ -127,7 +127,7 @@ watch(sendCD, (newValue) => {
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
sendCD.value = store.state.demos.board?.sendCD || 0;
|
||||
sendCD.value = store.state.demosLocal.board?.sendCD || 0;
|
||||
await refreshBoard();
|
||||
timer = setInterval(refreshBoard, 7000)
|
||||
});
|
||||
|
||||
@ -44,7 +44,8 @@ async function deleteMessage(id, message) {
|
||||
<div class="content">{{ message.content }}</div>
|
||||
<div class="bottom">
|
||||
<div class="time">{{ message.date }}</div>
|
||||
<like_button :active="message.content.length%2===0" :amount="message.likes"/>
|
||||
<like_button :active="message.content.length%2===0" :amount="message.likes" :toggle-func="async (a)=>{
|
||||
console.log(message.id, a)}"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
|
||||
@ -27,7 +27,7 @@ const generateResult = () => {
|
||||
|
||||
const saveResultToLocalStorage = () => {
|
||||
const result = generateResult();
|
||||
store.commit('setDemoValue', {demo: 'gpa', value: {groups: result}})
|
||||
store.commit('setLocalDemoValue', {demo: 'gpa', value: {groups: result}})
|
||||
start(result);
|
||||
};
|
||||
|
||||
@ -43,7 +43,7 @@ const start = (l) => {
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
const groupsData = store.state.demos.gpa?.groups;
|
||||
const groupsData = store.state.demosLocal.gpa?.groups;
|
||||
if (groupsData?.length > 0) {
|
||||
lessons.value = groupsData.map(data => ({selectIndex: data[0], choiceValue: data[1]}));
|
||||
} else {
|
||||
|
||||
@ -11,7 +11,7 @@ const store = createStore({
|
||||
userInfo: {},
|
||||
editStore: {},
|
||||
editAutoSave: {on: true, interval: 30000},
|
||||
demos: {},
|
||||
demosLocal: {},
|
||||
},
|
||||
mutations: {
|
||||
toggleTheme(state) {
|
||||
@ -35,8 +35,8 @@ const store = createStore({
|
||||
stopLoading(state) {
|
||||
state.loading.isLoading = false;
|
||||
},
|
||||
setDemoValue(state, obj) {
|
||||
state.demos[obj.demo] = {...state.demos[obj.demo], ...obj.value}
|
||||
setLocalDemoValue(state, obj) {
|
||||
state.demosLocal[obj.demo] = {...state.demosLocal[obj.demo], ...obj.value}
|
||||
},
|
||||
saveEdit(state, obj) {
|
||||
state.editStore = {...state.editStore, ...obj};
|
||||
@ -82,10 +82,10 @@ const store = createStore({
|
||||
plugins: [
|
||||
createPersistedStatePlugin({
|
||||
key: 'cyberStorage',
|
||||
whitelist: ['theme', 'userInfo', 'demos', 'editStore', 'editAutoSave'],
|
||||
whitelist: ['theme', 'userInfo', 'demosLocal', 'editStore', 'editAutoSave'],
|
||||
}),
|
||||
createSessionStatePlugin({
|
||||
key: 'cyber',
|
||||
key: 'cyberStorage',
|
||||
whitelist: []
|
||||
})
|
||||
]
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user