|
@@ -26,8 +26,9 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts" name="MarkHeader">
|
|
<script setup lang="ts" name="MarkHeader">
|
|
-import { reactive, ref, computed, useAttrs, watch } from 'vue'
|
|
|
|
-import useFetch from '@/hooks/useFetch'
|
|
|
|
|
|
+import { reactive, ref, computed, useAttrs, watch, onUnmounted } from 'vue'
|
|
|
|
+import { useRoute } from 'vue-router'
|
|
|
|
+import useMainStore from '@/store/main'
|
|
import SvgIcon from '@/components/common/SvgIcon.vue'
|
|
import SvgIcon from '@/components/common/SvgIcon.vue'
|
|
import ColorPicker from '@/components/common/ColorPicker.vue'
|
|
import ColorPicker from '@/components/common/ColorPicker.vue'
|
|
import Message from '@/components/shared/message/Message.vue'
|
|
import Message from '@/components/shared/message/Message.vue'
|
|
@@ -74,6 +75,13 @@ const emits = defineEmits<{
|
|
(e: 'background-color', color: number[]): void
|
|
(e: 'background-color', color: number[]): void
|
|
}>()
|
|
}>()
|
|
|
|
|
|
|
|
+const props = defineProps<{
|
|
|
|
+ excludeOperations?: ButtonType[]
|
|
|
|
+ includeOperations?: ButtonType[]
|
|
|
|
+ replyUserId?: number | null
|
|
|
|
+ paperPath?: string | null
|
|
|
|
+}>()
|
|
|
|
+
|
|
const buttons: HeaderButton[] = [
|
|
const buttons: HeaderButton[] = [
|
|
{ title: '返回', type: 'back' },
|
|
{ title: '返回', type: 'back' },
|
|
{ title: '放大', type: 'scale-up' },
|
|
{ title: '放大', type: 'scale-up' },
|
|
@@ -91,13 +99,6 @@ const buttons: HeaderButton[] = [
|
|
{ title: '设置专家卷', type: 'bookmark' },
|
|
{ title: '设置专家卷', type: 'bookmark' },
|
|
]
|
|
]
|
|
|
|
|
|
-const props = defineProps<{
|
|
|
|
- excludeOperations?: ButtonType[]
|
|
|
|
- includeOperations?: ButtonType[]
|
|
|
|
- replyUserId?: number | null
|
|
|
|
- paperPath?: string | null
|
|
|
|
-}>()
|
|
|
|
-
|
|
|
|
const refs = reactive<Partial<Record<ButtonType, Element>>>({
|
|
const refs = reactive<Partial<Record<ButtonType, Element>>>({
|
|
'front-color': void 0,
|
|
'front-color': void 0,
|
|
'background-color': void 0,
|
|
'background-color': void 0,
|
|
@@ -118,6 +119,14 @@ const usedOperations = computed(() => {
|
|
|
|
|
|
const attrs = useAttrs()
|
|
const attrs = useAttrs()
|
|
|
|
|
|
|
|
+const mainStore = useMainStore()
|
|
|
|
+
|
|
|
|
+const { fullPath } = useRoute()
|
|
|
|
+
|
|
|
|
+const userMarkConfig = computed(() => {
|
|
|
|
+ return mainStore.userMarkConfig?.[fullPath]
|
|
|
|
+})
|
|
|
|
+
|
|
/** center */
|
|
/** center */
|
|
const center = ref<boolean>(false)
|
|
const center = ref<boolean>(false)
|
|
|
|
|
|
@@ -190,14 +199,29 @@ const setCurrentConfig = (config: MarkConfig) => {
|
|
backgroundColor.value = config.backgroundColor ?? backgroundColor.value
|
|
backgroundColor.value = config.backgroundColor ?? backgroundColor.value
|
|
}
|
|
}
|
|
|
|
|
|
-const loadUserConfig = async () => {
|
|
|
|
- try {
|
|
|
|
- const configStr = await useFetch('getUserMarkConfig').fetch()
|
|
|
|
- const config = JSON.parse(configStr)
|
|
|
|
- } catch (error) {
|
|
|
|
- console.error(error)
|
|
|
|
|
|
+watch(
|
|
|
|
+ userMarkConfig,
|
|
|
|
+ () => {
|
|
|
|
+ if (userMarkConfig.value) {
|
|
|
|
+ setCurrentConfig(userMarkConfig.value)
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ { immediate: true }
|
|
|
|
+)
|
|
|
|
+
|
|
|
|
+onUnmounted(() => {
|
|
|
|
+ if (fullPath) {
|
|
|
|
+ mainStore.setUserMarkConfig({
|
|
|
|
+ [fullPath]: {
|
|
|
|
+ center: center.value,
|
|
|
|
+ ratio: ratio.value,
|
|
|
|
+ rotate: rotate.value,
|
|
|
|
+ frontColor: frontColor.value,
|
|
|
|
+ backgroundColor: backgroundColor.value,
|
|
|
|
+ },
|
|
|
|
+ })
|
|
}
|
|
}
|
|
-}
|
|
|
|
|
|
+})
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|