From ad376b24b44c4634620531b8445479b21a0a81ef Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Fri, 13 Mar 2026 12:27:09 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat(iot):=20=E5=89=8D=E7=AB=AF=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=20Database=20=E6=95=B0=E6=8D=AE=E7=9B=AE=E7=9A=84?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E8=A1=A8=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. DatabaseConfigForm.vue: 新增 Database 配置表单(JDBC地址/用户名/密码/目标表名)
2. config/index.ts: 导出 DatabaseConfigForm 组件
3. DataSinkForm.vue: 引入 DatabaseConfigForm 条件渲染和校验规则
4. api/sink/index.ts: 添加 DatabaseConfig 接口和联合类型
---
 src/api/iot/rule/data/sink/index.ts           |  9 ++++
 src/views/iot/rule/data/sink/DataSinkForm.vue |  8 ++++
 .../data/sink/config/DatabaseConfigForm.vue   | 44 +++++++++++++++++++
 src/views/iot/rule/data/sink/config/index.ts  |  2 +
 4 files changed, 63 insertions(+)
 create mode 100644 src/views/iot/rule/data/sink/config/DatabaseConfigForm.vue

diff --git a/src/api/iot/rule/data/sink/index.ts b/src/api/iot/rule/data/sink/index.ts
index 31a2659a7..9bc356bc7 100644
--- a/src/api/iot/rule/data/sink/index.ts
+++ b/src/api/iot/rule/data/sink/index.ts
@@ -13,6 +13,7 @@ export interface DataSinkVO {
     | TcpConfig
     | WebSocketConfig
     | MqttConfig
+    | DatabaseConfig
     | RocketMQConfig
     | KafkaMQConfig
     | RabbitMQConfig
@@ -73,6 +74,14 @@ export interface MqttConfig extends Config {
   topic: string
 }
 
+/** Database 配置 */
+export interface DatabaseConfig extends Config {
+  jdbcUrl: string
+  username: string
+  password: string
+  tableName: string
+}
+
 /** RocketMQ 配置 */
 export interface RocketMQConfig extends Config {
   nameServer: string
diff --git a/src/views/iot/rule/data/sink/DataSinkForm.vue b/src/views/iot/rule/data/sink/DataSinkForm.vue
index 2aca73f9d..5165bea3e 100644
--- a/src/views/iot/rule/data/sink/DataSinkForm.vue
+++ b/src/views/iot/rule/data/sink/DataSinkForm.vue
@@ -30,6 +30,10 @@
         v-model="formData.config"
       />
       <MqttConfigForm v-if="IotDataSinkTypeEnum.MQTT === formData.type" v-model="formData.config" />
+      <DatabaseConfigForm
+        v-if="IotDataSinkTypeEnum.DATABASE === formData.type"
+        v-model="formData.config"
+      />
       <RocketMQConfigForm
         v-if="IotDataSinkTypeEnum.ROCKETMQ === formData.type"
         v-model="formData.config"
@@ -69,6 +73,7 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { CommonStatusEnum } from '@/utils/constants'
 import { DataSinkApi, DataSinkVO, IotDataSinkTypeEnum } from '@/api/iot/rule/data/sink'
 import {
+  DatabaseConfigForm,
   HttpConfigForm,
   KafkaMQConfigForm,
   MqttConfigForm,
@@ -116,6 +121,9 @@ const formRules = reactive({
   'config.password': [{ required: true, message: '密码不能为空', trigger: 'blur' }],
   'config.clientId': [{ required: true, message: '客户端 ID 不能为空', trigger: 'blur' }],
   'config.topic': [{ required: true, message: '主题不能为空', trigger: 'blur' }],
+  // Database 配置
+  'config.jdbcUrl': [{ required: true, message: 'JDBC 连接地址不能为空', trigger: 'blur' }],
+  'config.tableName': [{ required: true, message: '目标表名不能为空', trigger: 'blur' }],
   // RocketMQ 配置
   'config.nameServer': [{ required: true, message: 'NameServer 地址不能为空', trigger: 'blur' }],
   'config.accessKey': [{ required: true, message: 'AccessKey 不能为空', trigger: 'blur' }],
diff --git a/src/views/iot/rule/data/sink/config/DatabaseConfigForm.vue b/src/views/iot/rule/data/sink/config/DatabaseConfigForm.vue
new file mode 100644
index 000000000..d9a596cf3
--- /dev/null
+++ b/src/views/iot/rule/data/sink/config/DatabaseConfigForm.vue
@@ -0,0 +1,44 @@
+<template>
+  <el-form-item label="JDBC 地址" prop="config.jdbcUrl">
+    <el-input
+      v-model="config.jdbcUrl"
+      placeholder="请输入JDBC连接地址，如：jdbc:mysql://localhost:3306/iot_data"
+    />
+  </el-form-item>
+  <el-form-item label="用户名" prop="config.username">
+    <el-input v-model="config.username" placeholder="请输入数据库用户名" />
+  </el-form-item>
+  <el-form-item label="密码" prop="config.password">
+    <el-input v-model="config.password" placeholder="请输入数据库密码" show-password type="password" />
+  </el-form-item>
+  <el-form-item label="目标表名" prop="config.tableName">
+    <el-input v-model="config.tableName" placeholder="请输入目标表名，如：iot_device_message_sink" />
+  </el-form-item>
+</template>
+<script lang="ts" setup>
+import { DatabaseConfig, IotDataSinkTypeEnum } from '@/api/iot/rule/data/sink'
+import { useVModel } from '@vueuse/core'
+import { isEmpty } from '@/utils/is'
+
+defineOptions({ name: 'DatabaseConfigForm' })
+
+const props = defineProps<{
+  modelValue: any
+}>()
+const emit = defineEmits(['update:modelValue'])
+const config = useVModel(props, 'modelValue', emit) as Ref<DatabaseConfig>
+
+/** 组件初始化 */
+onMounted(() => {
+  if (!isEmpty(config.value)) {
+    return
+  }
+  config.value = {
+    type: IotDataSinkTypeEnum.DATABASE + '', // 序列化成对应类型时使用
+    jdbcUrl: '',
+    username: '',
+    password: '',
+    tableName: ''
+  }
+})
+</script>
diff --git a/src/views/iot/rule/data/sink/config/index.ts b/src/views/iot/rule/data/sink/config/index.ts
index f04808f58..67b0d2fa6 100644
--- a/src/views/iot/rule/data/sink/config/index.ts
+++ b/src/views/iot/rule/data/sink/config/index.ts
@@ -2,6 +2,7 @@ import HttpConfigForm from './HttpConfigForm.vue'
 import TcpConfigForm from './TcpConfigForm.vue'
 import WebSocketConfigForm from './WebSocketConfigForm.vue'
 import MqttConfigForm from './MqttConfigForm.vue'
+import DatabaseConfigForm from './DatabaseConfigForm.vue'
 import RocketMQConfigForm from './RocketMQConfigForm.vue'
 import KafkaMQConfigForm from './KafkaMQConfigForm.vue'
 import RabbitMQConfigForm from './RabbitMQConfigForm.vue'
@@ -12,6 +13,7 @@ export {
   TcpConfigForm,
   WebSocketConfigForm,
   MqttConfigForm,
+  DatabaseConfigForm,
   RocketMQConfigForm,
   KafkaMQConfigForm,
   RabbitMQConfigForm,

From 9f19835a80c40c9fdafe3ec96c0a047eab58d4d3 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Fri, 13 Mar 2026 12:30:04 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat(iot):=20Database=20=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=BB=BA=E8=A1=A8=20SQL=20=E6=8F=90=E7=A4=BA?=
 =?UTF-8?q?=E5=92=8C=E4=B8=80=E9=94=AE=E5=A4=8D=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 顶部 el-alert 友好提示用户需要先创建表
- 内嵌 SQL 文本框(monospace字体) + 复制按钮
- tableName 默认值设为 iot_device_message_sink
---
 .../data/sink/config/DatabaseConfigForm.vue   | 55 ++++++++++++++++++-
 1 file changed, 54 insertions(+), 1 deletion(-)

diff --git a/src/views/iot/rule/data/sink/config/DatabaseConfigForm.vue b/src/views/iot/rule/data/sink/config/DatabaseConfigForm.vue
index d9a596cf3..bbad1d3f0 100644
--- a/src/views/iot/rule/data/sink/config/DatabaseConfigForm.vue
+++ b/src/views/iot/rule/data/sink/config/DatabaseConfigForm.vue
@@ -1,4 +1,35 @@
 <template>
+  <el-alert
+    :closable="false"
+    show-icon
+    title="使用前请先在目标数据库中创建消息表"
+    type="info"
+    style="margin-bottom: 16px"
+  >
+    <template #default>
+      <div style="margin-top: 4px">
+        <el-text size="small" type="info">
+          设备消息将以固定结构写入目标表，请先执行以下建表 SQL：
+        </el-text>
+        <div style="position: relative; margin-top: 8px">
+          <el-input
+            v-model="createTableSQL"
+            :autosize="{ minRows: 3, maxRows: 12 }"
+            readonly
+            type="textarea"
+            style="font-family: monospace; font-size: 12px"
+          />
+          <el-button
+            :icon="DocumentCopy"
+            circle
+            size="small"
+            style="position: absolute; top: 8px; right: 8px"
+            @click="handleCopySQL"
+          />
+        </div>
+      </div>
+    </template>
+  </el-alert>
   <el-form-item label="JDBC 地址" prop="config.jdbcUrl">
     <el-input
       v-model="config.jdbcUrl"
@@ -16,9 +47,11 @@
   </el-form-item>
 </template>
 <script lang="ts" setup>
+import { DocumentCopy } from '@element-plus/icons-vue'
 import { DatabaseConfig, IotDataSinkTypeEnum } from '@/api/iot/rule/data/sink'
 import { useVModel } from '@vueuse/core'
 import { isEmpty } from '@/utils/is'
+import { useClipboard } from '@vueuse/core'
 
 defineOptions({ name: 'DatabaseConfigForm' })
 
@@ -27,6 +60,26 @@ const props = defineProps<{
 }>()
 const emit = defineEmits(['update:modelValue'])
 const config = useVModel(props, 'modelValue', emit) as Ref<DatabaseConfig>
+const message = useMessage()
+
+const createTableSQL = ref(`CREATE TABLE iot_device_message_sink (
+    id VARCHAR(64) NOT NULL COMMENT '消息ID',
+    device_id BIGINT NOT NULL COMMENT '设备编号',
+    tenant_id BIGINT NOT NULL DEFAULT 0 COMMENT '租户编号',
+    method VARCHAR(128) COMMENT '请求方法',
+    report_time DATETIME COMMENT '上报时间',
+    data TEXT COMMENT '完整消息JSON',
+    create_time DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
+    PRIMARY KEY (id) USING BTREE,
+    INDEX idx_create_time (create_time ASC) USING BTREE
+) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci COMMENT = 'IoT 设备消息流转目标表';`)
+
+/** 复制建表 SQL */
+const { copy } = useClipboard()
+const handleCopySQL = async () => {
+  await copy(createTableSQL.value)
+  message.success('建表 SQL 已复制到剪贴板')
+}
 
 /** 组件初始化 */
 onMounted(() => {
@@ -38,7 +91,7 @@ onMounted(() => {
     jdbcUrl: '',
     username: '',
     password: '',
-    tableName: ''
+    tableName: 'iot_device_message_sink'
   }
 })
 </script>

From dfee5b999d1c9a1e25e149e4baeff59b6767d528 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Fri, 13 Mar 2026 12:46:57 +0800
Subject: [PATCH 3/3] =?UTF-8?q?style(iot):=20=E4=BC=98=E5=8C=96=20Database?=
 =?UTF-8?q?=20=E6=95=B0=E6=8D=AE=E7=9B=AE=E7=9A=84=E7=9A=84=E5=BB=BA?=
 =?UTF-8?q?=E8=A1=A8=E6=8F=90=E7=A4=BAUX?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 表名输入框右侧附加「查看/收起表结构提示」按钮
- 引入 el-collapse-transition 结合酷炫终端卡片实现平滑的折叠动画
- 修正 Vue template 中由于缺少闭合 div 导致的语法编译错误
---
 .../data/sink/config/DatabaseConfigForm.vue   | 263 +++++++++++++++---
 1 file changed, 223 insertions(+), 40 deletions(-)

diff --git a/src/views/iot/rule/data/sink/config/DatabaseConfigForm.vue b/src/views/iot/rule/data/sink/config/DatabaseConfigForm.vue
index bbad1d3f0..3311de428 100644
--- a/src/views/iot/rule/data/sink/config/DatabaseConfigForm.vue
+++ b/src/views/iot/rule/data/sink/config/DatabaseConfigForm.vue
@@ -1,35 +1,4 @@
 <template>
-  <el-alert
-    :closable="false"
-    show-icon
-    title="使用前请先在目标数据库中创建消息表"
-    type="info"
-    style="margin-bottom: 16px"
-  >
-    <template #default>
-      <div style="margin-top: 4px">
-        <el-text size="small" type="info">
-          设备消息将以固定结构写入目标表，请先执行以下建表 SQL：
-        </el-text>
-        <div style="position: relative; margin-top: 8px">
-          <el-input
-            v-model="createTableSQL"
-            :autosize="{ minRows: 3, maxRows: 12 }"
-            readonly
-            type="textarea"
-            style="font-family: monospace; font-size: 12px"
-          />
-          <el-button
-            :icon="DocumentCopy"
-            circle
-            size="small"
-            style="position: absolute; top: 8px; right: 8px"
-            @click="handleCopySQL"
-          />
-        </div>
-      </div>
-    </template>
-  </el-alert>
   <el-form-item label="JDBC 地址" prop="config.jdbcUrl">
     <el-input
       v-model="config.jdbcUrl"
@@ -40,18 +9,69 @@
     <el-input v-model="config.username" placeholder="请输入数据库用户名" />
   </el-form-item>
   <el-form-item label="密码" prop="config.password">
-    <el-input v-model="config.password" placeholder="请输入数据库密码" show-password type="password" />
+    <el-input
+      v-model="config.password"
+      placeholder="请输入数据库密码"
+      show-password
+      type="password"
+    />
   </el-form-item>
   <el-form-item label="目标表名" prop="config.tableName">
-    <el-input v-model="config.tableName" placeholder="请输入目标表名，如：iot_device_message_sink" />
+    <div style="display: flex; align-items: center; gap: 12px; width: 100%">
+      <el-input v-model="config.tableName" placeholder="目标表名" style="width: 240px" />
+      <el-button type="primary" link @click="toggleSqlTip">
+        <el-icon class="mr-1"><component :is="showSqlTip ? 'ArrowUp' : 'Document'" /></el-icon>
+        {{ showSqlTip ? '收起表结构提示' : '查看表结构提示' }}
+      </el-button>
+    </div>
   </el-form-item>
+
+  <!-- Redesigned Terminal-style SQL snippet -->
+  <el-collapse-transition>
+    <div v-show="showSqlTip" class="terminal-card">
+      <div class="terminal-header">
+        <div class="terminal-dots">
+          <div class="dot red"></div>
+          <div class="dot yellow"></div>
+          <div class="dot green"></div>
+        </div>
+        <div class="terminal-title">Initialization Required</div>
+        <button class="terminal-copy-btn" type="button" @click="handleCopySQL">
+          <el-icon class="copy-icon"><Check v-if="isCopied" /><DocumentCopy v-else /></el-icon>
+          {{ isCopied ? '已复制' : 'Copy SQL' }}
+        </button>
+      </div>
+      <div class="terminal-body">
+        <div class="terminal-desc">
+          ✨ 目标数据库必须包含以下结构的表，才能正常接收数据流转的消息：
+        </div>
+        <div class="terminal-code-wrapper">
+          <pre
+            class="terminal-code"
+          ><code><span class="kw">CREATE</span> <span class="kw">TABLE</span> <span class="identifier">iot_device_message_sink</span> (
+    <span class="identifier">id</span> <span class="type">VARCHAR</span>(64) <span class="kw">NOT NULL COMMENT</span> <span class="string">'消息ID'</span>,
+    <span class="identifier">device_id</span> <span class="type">BIGINT</span> <span class="kw">NOT NULL COMMENT</span> <span class="string">'设备编号'</span>,
+    <span class="identifier">tenant_id</span> <span class="type">BIGINT</span> <span class="kw">NOT NULL DEFAULT</span> <span class="num">0</span> <span class="kw">COMMENT</span> <span class="string">'租户编号'</span>,
+    <span class="identifier">method</span> <span class="type">VARCHAR</span>(128) <span class="kw">COMMENT</span> <span class="string">'请求方法'</span>,
+    <span class="identifier">report_time</span> <span class="type">DATETIME</span> <span class="kw">COMMENT</span> <span class="string">'上报时间'</span>,
+    <span class="identifier">data</span> <span class="type">TEXT</span> <span class="kw">COMMENT</span> <span class="string">'完整消息JSON'</span>,
+    <span class="identifier">create_time</span> <span class="type">DATETIME</span> <span class="kw">NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT</span> <span class="string">'创建时间'</span>,
+    <span class="kw">PRIMARY KEY</span> (<span class="identifier">id</span>) <span class="kw">USING BTREE</span>,
+    <span class="kw">INDEX</span> <span class="identifier">idx_create_time</span> (<span class="identifier">create_time</span> <span class="kw">ASC</span>) <span class="kw">USING BTREE</span>
+) <span class="kw">ENGINE</span> = <span class="identifier">InnoDB</span> <span class="kw">CHARACTER SET</span> = <span class="identifier">utf8mb4</span> <span class="kw">COLLATE</span> = <span class="identifier">utf8mb4_unicode_ci</span> <span class="kw">COMMENT</span> = <span class="string">'IoT 设备消息流转目标表'</span>;</code></pre>
+        </div>
+      </div>
+    </div>
+  </el-collapse-transition>
 </template>
+
 <script lang="ts" setup>
-import { DocumentCopy } from '@element-plus/icons-vue'
+import { onMounted, ref } from 'vue'
+import { Check, DocumentCopy } from '@element-plus/icons-vue'
 import { DatabaseConfig, IotDataSinkTypeEnum } from '@/api/iot/rule/data/sink'
-import { useVModel } from '@vueuse/core'
+import { useClipboard, useVModel } from '@vueuse/core'
 import { isEmpty } from '@/utils/is'
-import { useClipboard } from '@vueuse/core'
+import { useMessage } from '@/hooks/web/useMessage'
 
 defineOptions({ name: 'DatabaseConfigForm' })
 
@@ -62,7 +82,7 @@ const emit = defineEmits(['update:modelValue'])
 const config = useVModel(props, 'modelValue', emit) as Ref<DatabaseConfig>
 const message = useMessage()
 
-const createTableSQL = ref(`CREATE TABLE iot_device_message_sink (
+const rawSQL = `CREATE TABLE iot_device_message_sink (
     id VARCHAR(64) NOT NULL COMMENT '消息ID',
     device_id BIGINT NOT NULL COMMENT '设备编号',
     tenant_id BIGINT NOT NULL DEFAULT 0 COMMENT '租户编号',
@@ -72,13 +92,23 @@ const createTableSQL = ref(`CREATE TABLE iot_device_message_sink (
     create_time DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
     PRIMARY KEY (id) USING BTREE,
     INDEX idx_create_time (create_time ASC) USING BTREE
-) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci COMMENT = 'IoT 设备消息流转目标表';`)
+) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci COMMENT = 'IoT 设备消息流转目标表';`
 
-/** 复制建表 SQL */
+const isCopied = ref(false)
+const showSqlTip = ref(false)
 const { copy } = useClipboard()
+
+const toggleSqlTip = () => {
+  showSqlTip.value = !showSqlTip.value
+}
+
 const handleCopySQL = async () => {
-  await copy(createTableSQL.value)
+  await copy(rawSQL)
+  isCopied.value = true
   message.success('建表 SQL 已复制到剪贴板')
+  setTimeout(() => {
+    isCopied.value = false
+  }, 2000)
 }
 
 /** 组件初始化 */
@@ -95,3 +125,156 @@ onMounted(() => {
   }
 })
 </script>
+
+<style scoped>
+/* 终端风卡片设计 (Tokyo Night 极客美学) */
+.terminal-card {
+  margin-top: 32px;
+  margin-bottom: 8px;
+  border-radius: 12px;
+  background-color: #1a1b26;
+  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
+  border: 1px solid #24283b;
+  overflow: hidden;
+  font-family: 'Fira Code', 'JetBrains Mono', Consolas, Monaco, monospace;
+}
+
+.terminal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background-color: #24283b;
+  border-bottom: 1px solid #16161e;
+  position: relative;
+}
+
+.terminal-dots {
+  display: flex;
+  gap: 8px;
+}
+
+.dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  transition: transform 0.2s ease;
+}
+.dot:hover {
+  transform: scale(1.2);
+}
+.dot.red {
+  background-color: #f7768e;
+  box-shadow: 0 0 5px rgba(247, 118, 142, 0.4);
+}
+.dot.yellow {
+  background-color: #e0af68;
+  box-shadow: 0 0 5px rgba(224, 175, 104, 0.4);
+}
+.dot.green {
+  background-color: #9ece6a;
+  box-shadow: 0 0 5px rgba(158, 206, 106, 0.4);
+}
+
+.terminal-title {
+  color: #a9b1d6;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.8px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.terminal-copy-btn {
+  background: transparent;
+  border: 1px solid #414868;
+  color: #a9b1d6;
+  border-radius: 6px;
+  padding: 6px 12px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-family: inherit;
+}
+.terminal-copy-btn:hover {
+  background: #bb9af7;
+  border-color: #bb9af7;
+  color: #1a1b26;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(187, 154, 247, 0.3);
+}
+.terminal-copy-btn:active {
+  transform: translateY(0);
+}
+
+.copy-icon {
+  font-size: 14px;
+}
+
+.terminal-body {
+  padding: 20px;
+  color: #c0caf5;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.terminal-desc {
+  color: #7dcfff;
+  margin-bottom: 16px;
+  font-family: var(--el-font-family);
+  font-size: 13px;
+  padding-bottom: 16px;
+  border-bottom: 1px dashed #292e42;
+}
+
+.terminal-code-wrapper {
+  overflow-x: auto;
+  border-radius: 8px;
+}
+
+.terminal-code {
+  margin: 0;
+  white-space: pre;
+  min-width: max-content;
+}
+
+.terminal-code code {
+  font-family: inherit;
+}
+
+/* 手工实现的轻量级 SQL 语法高亮 (Tokyo Night Color Palette) */
+.kw {
+  color: #bb9af7;
+} /* 紫色 - 关键字 */
+.type {
+  color: #2ac3de;
+} /* 青色 - 数据类型 */
+.string {
+  color: #9ece6a;
+} /* 绿色 - 字符串/注释 */
+.identifier {
+  color: #c0caf5;
+} /* 浅蓝 - 变量名/默认字色 */
+.num {
+  color: #ff9e64;
+} /* 橙色 - 数字 */
+
+/* 定制代码块的滚动条 */
+.terminal-code-wrapper::-webkit-scrollbar {
+  height: 8px;
+}
+.terminal-code-wrapper::-webkit-scrollbar-thumb {
+  background: #414868;
+  border-radius: 4px;
+}
+.terminal-code-wrapper::-webkit-scrollbar-thumb:hover {
+  background: #565f89;
+}
+.terminal-code-wrapper::-webkit-scrollbar-track {
+  background: transparent;
+}
+</style>