Shikong/wails-app-dock
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式调整

Browse Source
This commit is contained in:
shikong 2024-02-19 01:15:05 +08:00
parent 5addb707ee
commit d6e5161114
3 changed files with 33 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/App.vue
View File

@ -135,7 +135,7 @@ body {
justify-content: space-between; justify-content: space-between;
height: 50px; height: 50px;
padding: 0 10px; padding: 0 10px;
background-color: rgba(171, 126, 220, 0.9); background-color: rgba(0, 152, 255, 0.9);
.nav { .nav {
a { a {
@ -145,7 +145,7 @@ body {
line-height: 30px; line-height: 30px;
padding: 0 5px; padding: 0 5px;
margin-right: 8px; margin-right: 8px;
background-color: #ab7edc; background-color: #0098ff;
border-radius: 2px; border-radius: 2px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -155,7 +155,7 @@ body {
&:hover, &:hover,
&.router-link-exact-active { &.router-link-exact-active {
background-color: #d7a8d8; background-color: #00acff;
color: #ffffff; color: #ffffff;
} }
} }
@ -187,12 +187,12 @@ body {
font-size: 14px; font-size: 14px;
&:hover { &:hover {
background-color: #ff050542; background-color: #00ccff;
cursor: pointer; cursor: pointer;
} }
&.active { &.active {
background-color: #ff050542; background-color: #00ccff;
color: #ffffff; color: #ffffff;
cursor: not-allowed; cursor: not-allowed;
} }
@ -214,7 +214,7 @@ body {
line-height: 30px; line-height: 30px;
padding: 0 5px; padding: 0 5px;
margin-left: 8px; margin-left: 8px;
background-color: #ab7edc; background-color: #00ccff;
border-radius: 2px; border-radius: 2px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -222,7 +222,7 @@ body {
font-size: 14px; font-size: 14px;
&:hover { &:hover {
background-color: #d7a8d8; background-color: #00bfff;
color: #ffffff; color: #ffffff;
cursor: pointer; cursor: pointer;
} }

56
frontend/src/components/markdown/tui-editor.vue
View File

@ -1,17 +1,28 @@
<script setup lang="ts"> <script setup lang="ts">
import '@toast-ui/editor/dist/toastui-editor.css'; import '@toast-ui/editor/dist/toastui-editor.css';
// import 'prismjs/themes/prism-tomorrow.css';
import type {Ref} from "vue"; import type {Ref} from "vue";
import {onMounted, reactive, ref, watch} from "vue"; import {onMounted, reactive, ref, watch} from "vue";
import Editor from "@toast-ui/editor"; import Editor from "@toast-ui/editor";
import Prism from 'prismjs' import Prism from 'prismjs'
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight' import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight'
import colorSyntax from "@toast-ui/editor-plugin-color-syntax"
import chart from "@toast-ui/editor-plugin-chart" import chart from "@toast-ui/editor-plugin-chart"
import tableMergedCell from "@toast-ui/editor-plugin-table-merged-cell" import tableMergedCell from "@toast-ui/editor-plugin-table-merged-cell"
import uml from "@toast-ui/editor-plugin-uml" import uml from "@toast-ui/editor-plugin-uml"
import "@toast-ui/editor/dist/i18n/zh-cn"; import "@toast-ui/editor/dist/i18n/zh-cn";
import {useI18n} from "vue-i18n"; import {useI18n} from "vue-i18n";
const emit = defineEmits([
"update:modelValue"
])
const props = defineProps({
modelValue: {
type: String,
default: ""
}
})
const chartOptions = { const chartOptions = {
minWidth: 100, minWidth: 100,
maxWidth: 600, maxWidth: 600,
@ -30,24 +41,28 @@ function initEditor(editorRef:Ref<any>){
language: locale.value, language: locale.value,
previewStyle: 'vertical', previewStyle: 'vertical',
height: '85vh', height: '85vh',
initialValue: "", initialValue: props.modelValue,
plugins: [ plugins: [
[chart, chartOptions], [chart, chartOptions],
[codeSyntaxHighlight, {highlighter: Prism}], [codeSyntaxHighlight, {highlighter: Prism}],
tableMergedCell, tableMergedCell,
uml, uml,
colorSyntax,
], ],
useCommandShortcut: true, useCommandShortcut: true,
usageStatistics: true, usageStatistics: true,
hideModeSwitch: false, hideModeSwitch: false,
toolbarItems: [ events: {
['heading', 'bold', 'italic', 'strike'], change: () => emit('update:modelValue', editor.getMarkdown()),
['hr', 'quote'], },
['ul', 'ol', 'task', 'indent', 'outdent'], // toolbarItems: [
['table', 'image', 'link'], // ['heading', 'bold', 'italic', 'strike'],
['code', 'codeblock'], // ['hr', 'quote'],
['scrollSync'], // ['ul', 'ol', 'task', 'indent', 'outdent'],
] // ['table', 'image', 'link'],
// ['code', 'codeblock'],
// ['scrollSync'],
// ]
}) })
// const viewer = Editor.factory({ // const viewer = Editor.factory({
@ -62,7 +77,6 @@ function initEditor(editorRef:Ref<any>){
} }
onMounted(() => { onMounted(() => {
console.log("locale.value",locale.value)
let editor = initEditor(editorRef); let editor = initEditor(editorRef);
watch(locale, value => { watch(locale, value => {
let markdown = editor.getMarkdown() let markdown = editor.getMarkdown()
@ -73,29 +87,9 @@ onMounted(() => {
}) })
}) })
//
// const defaultOptions = reactive({
// minHeight: '600px',
// language: 'zh-CN',
// useCommandShortcut: true,
// usageStatistics: true,
// hideModeSwitch: false,
// toolbarItems: [
// ['heading', 'bold', 'italic', 'strike'],
// ['hr', 'quote'],
// ['ul', 'ol', 'task', 'indent', 'outdent'],
// ['table', 'image', 'link'],
// ['code', 'codeblock'],
// ['scrollSync'],
// ]
// });
const ctx = reactive({ const ctx = reactive({
data: "" data: ""
}) })
</script> </script>
<template> <template>

2
frontend/vite.config.ts
View File

@ -13,7 +13,7 @@ export default defineConfig({
prismjsPlugin({ prismjsPlugin({
languages: "all", languages: "all",
plugins: ["line-numbers", "line-highlight"], plugins: ["line-numbers", "line-highlight"],
theme: "coy", theme: "default",
css: true, css: true,
}) })
], ],