feat(dev): 添加开发模式专用指令和配置支持

- 在 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/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开发模式内容</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)
+    }
+  }
+}