cc22655a1e
- 在 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 以适配暗黑模式背景透明度需求
44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import type { Directive, DirectiveBinding } from 'vue'
|
||
import { useConfigStoreHook } from '@/stores'
|
||
|
||
/**
|
||
* 开发模式专用指令
|
||
* 只在开发模式下显示元素，生产模式下会移除该元素
|
||
*
|
||
* \@param binding.value - 是否开启该功能，默认为 true
|
||
* @example
|
||
* \!-- 默认开启，开发模式显示 --
|
||
* \!div v-dev-only开发模式内容</div>
|
||
*
|
||
* \!-- 传入参数控制 --
|
||
* <div v-dev-only="true">开启指令</div>
|
||
* <div v-dev-only="false">取消指令</div>
|
||
*/
|
||
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)
|
||
}
|
||
}
|
||
}
|