From 87ecccbf8d5cd6ffbada5edbc0c5a5d794c7cfd3 Mon Sep 17 00:00:00 2001 From: ayang <473033518@qq.com> Date: Tue, 21 Mar 2023 13:28:46 +0800 Subject: [PATCH] perf: optimized some styles --- package.json | 1 - pnpm-lock.yaml | 8 --- src/App.vue | 6 +- src/assets/css/global.scss | 3 +- src/assets/css/theme.scss | 8 +-- src/components/Fixed/index.vue | 2 +- .../Function/components/HistoryDrawer.vue | 2 +- .../Function/components/ShortcutKey.vue | 2 +- src/components/Input/components/RoleList.vue | 2 +- src/components/Input/index.vue | 15 ++-- src/components/Session/index.scss | 57 +++++++++++++++ src/components/Session/index.vue | 27 ++----- src/stores/settings.ts | 4 -- src/types/declare.d.ts | 4 ++ src/utils/copyCode.ts | 70 ++++++++----------- 15 files changed, 116 insertions(+), 95 deletions(-) create mode 100644 src/components/Session/index.scss diff --git a/package.json b/package.json index 21eefc3..9fb76a5 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,6 @@ "@arco-design/web-vue": "^2.44.1", "@commitlint/cli": "^17.4.4", "@commitlint/config-conventional": "^17.4.4", - "@iconify-json/mdi": "^1.1.50", "@kidonng/daisyui": "^2.51.3", "@release-it/conventional-changelog": "^5.1.1", "@tauri-apps/cli": "^1.2.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 42f0ec2..f22dd43 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,7 +4,6 @@ specifiers: '@arco-design/web-vue': ^2.44.1 '@commitlint/cli': ^17.4.4 '@commitlint/config-conventional': ^17.4.4 - '@iconify-json/mdi': ^1.1.50 '@kidonng/daisyui': ^2.51.3 '@microsoft/fetch-event-source': ^2.0.1 '@multiavatar/multiavatar': ^1.0.7 @@ -70,7 +69,6 @@ devDependencies: '@arco-design/web-vue': 2.44.2_vue@3.2.47 '@commitlint/cli': 17.4.4 '@commitlint/config-conventional': 17.4.4 - '@iconify-json/mdi': 1.1.50 '@kidonng/daisyui': 2.51.3 '@release-it/conventional-changelog': 5.1.1_release-it@15.9.0 '@tauri-apps/cli': 1.2.3 @@ -623,12 +621,6 @@ packages: resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==} dev: true - /@iconify-json/mdi/1.1.50: - resolution: {integrity: sha512-SgbT5w5eHCdOG74ZWPz7HlTGk6VsifIJhNi6lAsxj/5Nlqt6Cz4LlQmSa9eecU9p075Jub2aAx/o7YI+GCahRQ==} - dependencies: - '@iconify/types': 2.0.0 - dev: true - /@iconify/types/2.0.0: resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==} dev: true diff --git a/src/App.vue b/src/App.vue index 6414d18..956bcbb 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,7 +3,7 @@ import { appWindow } from '@tauri-apps/api/window' import { initSQL } from '@/sqls' import { useSettingsStore } from '@/stores' -const { themeClass, isFix, windowFocused } = storeToRefs(useSettingsStore()) +const { isFix, windowFocused } = storeToRefs(useSettingsStore()) const isLoading = ref(true) @@ -26,10 +26,10 @@ onMounted(async () => { diff --git a/src/stores/settings.ts b/src/stores/settings.ts index d535407..f4ca372 100644 --- a/src/stores/settings.ts +++ b/src/stores/settings.ts @@ -9,9 +9,6 @@ export const useSettingsStore = defineStore( () => { // 主题 const themeMode = ref(THEME.light) - const themeClass = computed(() => - themeMode.value === THEME.light ? 'bg-white/70' : 'bg-black/70' - ) // 用户的唯一值 const uuid = ref('') @@ -108,7 +105,6 @@ export const useSettingsStore = defineStore( return { themeMode, - themeClass, uuid, isFix, windowFocused, diff --git a/src/types/declare.d.ts b/src/types/declare.d.ts index 9f55370..53305a2 100644 --- a/src/types/declare.d.ts +++ b/src/types/declare.d.ts @@ -1 +1,5 @@ declare module 'markdown-it-code-copy' + +declare interface Window { + [key: string]: any +} diff --git a/src/utils/copyCode.ts b/src/utils/copyCode.ts index 534f476..8b9a5e2 100644 --- a/src/utils/copyCode.ts +++ b/src/utils/copyCode.ts @@ -1,61 +1,51 @@ -// @unocss-include import Clipboard from 'clipboard' +type RulesArgs = [Array<{ content: string }>, number] + const PLUGIN_CLASS = 'code-copy' new Clipboard(`.${PLUGIN_CLASS}`, { - text: (trigger: HTMLButtonElement) => { - trigger.classList.add('i-mdi-checkbox-multiple-marked-outline') - setTimeout(() => { - trigger.classList.remove('i-mdi-checkbox-multiple-marked-outline') - }, 2000) - return trigger.getAttribute('data-clipboard-text') ?? '' - } -}) + text: (trigger: HTMLElement) => { + const uuid = trigger.getAttribute('data-uuid') + const copyValue = trigger.getAttribute('data-clipboard-text') -interface Options { - buttonClass?: string -} + if (!uuid || !copyValue || window[uuid]) return '' -type RulesArgs = [Array<{ content: string }>, number] + trigger.classList.add('copied') -const defaultOptions: Options = { - buttonClass: - 'text-white h-5 absolute cursor-pointer i-mdi-checkbox-multiple-blank-outline top-6 right-2' -} + window[uuid] = setTimeout(() => { + trigger.classList.remove('copied') -const renderCode = ( - origRule: (...args: RulesArgs) => string, - options: Options -) => { - options = { ...defaultOptions, ...options } + clearTimeout(window[uuid]) + window[uuid] = null + }, 3000) + + return copyValue + } +}) + +const renderCode = (originRule: (...args: RulesArgs) => string) => { return (...args: RulesArgs) => { const [tokens, idx] = args + const content = tokens[idx].content .replaceAll('"', '"') .replaceAll("'", '<') - const origRendered = origRule(...args) - if (content.length === 0) { - return origRendered - } + const originRendered = originRule(...args) + + if (!content) return originRendered return ` -
- ${origRendered} - -
-` +
+ ${originRendered} +
+
+ ` } } -export default (md: any, options: Options) => { - md.renderer.rules.code_block = renderCode( - md.renderer.rules.code_block, - options - ) - md.renderer.rules.fence = renderCode(md.renderer.rules.fence, options) +export default (md: any) => { + md.renderer.rules.code_block = renderCode(md.renderer.rules.code_block) + md.renderer.rules.fence = renderCode(md.renderer.rules.fence) }