From cc22655a1e64d0345efaa6c48a79092e1f67ed13 Mon Sep 17 00:00:00 2001 From: zhaoweijie Date: Sun, 21 Dec 2025 18:10:37 +0800 Subject: [PATCH] =?UTF-8?q?feat(dev):=20=E6=B7=BB=E5=8A=A0=E5=BC=80?= =?UTF-8?q?=E5=8F=91=E6=A8=A1=E5=BC=8F=E4=B8=93=E7=94=A8=E6=8C=87=E4=BB=A4?= =?UTF-8?q?=E5=92=8C=E9=85=8D=E7=BD=AE=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在 config.json 中新增 dev 配置项用于区分开发与生产环境 - 实现 v-dev-only 指令，仅在开发模式下渲染元素 - 注册全局自定义指令 dev-only，支持通过 binding.value 控制启用状态 - 在 TaskSyllabus/Bg.vue 中使用 v-dev-only 指令隐藏生产环境下的加号区域 - 移除 card 样式中的固定 margin-bottom，改由容器控制间距 - 统一使用 CSS 变量 --color-border-separate 替代硬编码的分割线颜色 - 为 Task.vue 的搜索框添加 clearable 属性并移除弹出项的阴影效果 - Layout 组件名称规范化为首字母大写 - 在主题样式中定义深色与浅色模式下的 --color-border-separate 颜色值 - 覆盖 Element Plus 的 --el-fill-color-blank 以适配暗黑模式背景透明度需求 --- frontend/public/config.json | 3 +- frontend/src/ directive/devOnly/index.ts | 43 +++++++++++++++++++ frontend/src/ directive/index.ts | 9 ++++ frontend/src/App.vue | 2 +- frontend/src/layout/components/Main/Task.vue | 2 + .../Main/TaskTemplate/TaskSyllabus/Bg.vue | 1 + .../Main/TaskTemplate/TaskSyllabus/index.vue | 7 ++- frontend/src/main.ts | 2 + frontend/src/stores/modules/config.ts | 1 + frontend/src/styles/theme.scss | 6 +++ 10 files changed, 70 insertions(+), 6 deletions(-) create mode 100644 frontend/src/ directive/devOnly/index.ts create mode 100644 frontend/src/ directive/index.ts diff --git a/frontend/public/config.json b/frontend/public/config.json index fc2bd32..fc6606d 100644 --- a/frontend/public/config.json +++ b/frontend/public/config.json @@ -15,5 +15,6 @@ ], "agentRepository": { "storageVersionIdentifier": "1" - } + }, + "dev": true } diff --git a/frontend/src/ directive/devOnly/index.ts b/frontend/src/ directive/devOnly/index.ts new file mode 100644 index 0000000..0f20554 --- /dev/null +++ b/frontend/src/ directive/devOnly/index.ts @@ -0,0 +1,43 @@ +import type { Directive, DirectiveBinding } from 'vue' +import { useConfigStoreHook } from '@/stores' + +/** + * 开发模式专用指令 + * 只在开发模式下显示元素，生产模式下会移除该元素 + * + * \@param binding.value - 是否开启该功能，默认为 true + * @example + * \!-- 默认开启，开发模式显示 -- + * \!div v-dev-only开发模式内容 + * + * \!-- 传入参数控制 -- + *
开启指令
+ *
取消指令
+ */ +export const devOnly: Directive = { + mounted(el: HTMLElement, binding: DirectiveBinding) { + checkAndRemoveElement(el, binding) + }, + + updated(el: HTMLElement, binding: DirectiveBinding) { + checkAndRemoveElement(el, binding) + }, +} + +const configStore = useConfigStoreHook() + +/** + * 检查并移除元素的逻辑 + */ +function checkAndRemoveElement(el: HTMLElement, binding: DirectiveBinding) { + const isDev = typeof configStore.config.dev === 'boolean' ? configStore.config.dev : import.meta.env.DEV + // 默认值为 true，如果没有传值或者传值为 true 都启用 + const shouldEnable = binding.value !== false + // 如果不是开发模式或者明确禁用，移除该元素 + if (!isDev && shouldEnable) { + console.log(1111) + if (el.parentNode) { + el.parentNode.removeChild(el) + } + } +} diff --git a/frontend/src/ directive/index.ts b/frontend/src/ directive/index.ts new file mode 100644 index 0000000..df63de2 --- /dev/null +++ b/frontend/src/ directive/index.ts @@ -0,0 +1,9 @@ +import type { App } from 'vue' + +import { devOnly } from './devOnly' + + +// 全局注册 directive +export function setupDirective(app: App) { + app.directive('dev-only', devOnly) +} diff --git a/frontend/src/App.vue b/frontend/src/App.vue index ab89ddd..bf7c7e9 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -3,7 +3,7 @@ import Layout from './layout/index.vue'