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] =?UTF-8?q?style(iot):=20=E4=BC=98=E5=8C=96=20Database=20?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=9B=AE=E7=9A=84=E7=9A=84=E5=BB=BA=E8=A1=A8?=
 =?UTF-8?q?=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>