Compare commits
39 Commits
v0.5.9
...
release/0.
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
da28207168 | ||
|
|
87cfbee6d3 | ||
|
|
0100b771b0 | ||
|
|
1758d6f918 | ||
|
|
b86cfcacaa | ||
|
|
7d543e06c6 | ||
|
|
17e4e3ad1c | ||
|
|
84579b83c9 | ||
|
|
7ddef7096b | ||
|
|
557178f182 | ||
|
|
a1b546ddd9 | ||
|
|
da5e879409 | ||
|
|
8935ad2905 | ||
|
|
cd5a0e85e8 | ||
|
|
ccb9f09452 | ||
|
|
5afd80c559 | ||
|
|
1b36f60821 | ||
|
|
eaa76d8f04 | ||
|
|
0f717706b0 | ||
|
|
8950081a6c | ||
|
|
3bf8758418 | ||
|
|
561d3810da | ||
|
|
18cb66b893 | ||
|
|
ab61e703b1 | ||
|
|
7933b4c315 | ||
|
|
c99f857d0a | ||
|
|
2c3f4a1032 | ||
|
|
72de16995a | ||
|
|
0adc8411fa | ||
|
|
8efa7e2de6 | ||
|
|
ecee206304 | ||
|
|
299dceb01c | ||
|
|
5cad761bdd | ||
|
|
b8728170ec | ||
|
|
4ce4cdaad8 | ||
|
|
cc7ef12029 | ||
|
|
5b6403f266 | ||
|
|
caceb2868d | ||
|
|
e7b9ff4a10 |
70
.github/workflows/release.yml
vendored
@@ -613,6 +613,74 @@ jobs:
|
||||
sha256sum "${FILES[@]}" > SHA256SUMS
|
||||
fi
|
||||
|
||||
- name: Checkout code for changelog
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
path: repo-for-changelog
|
||||
|
||||
- name: Generate Changelog
|
||||
id: changelog
|
||||
shell: bash
|
||||
run: |
|
||||
set -euo pipefail
|
||||
cd repo-for-changelog
|
||||
TAG="${{ github.ref_name }}"
|
||||
# 获取上一个 tag
|
||||
PREV_TAG=$(git tag --sort=-creatordate | grep -E '^v' | sed -n '2p' || true)
|
||||
if [ -z "$PREV_TAG" ]; then
|
||||
echo "⚠️ 未找到上一个 tag,使用全部 commit"
|
||||
RANGE="$TAG"
|
||||
else
|
||||
RANGE="${PREV_TAG}..${TAG}"
|
||||
fi
|
||||
|
||||
echo "📋 生成更新日志:$RANGE"
|
||||
|
||||
# 提取 commit 消息(排除 merge commit)
|
||||
COMMITS=$(git log "$RANGE" --no-merges --pretty=format:'%s' 2>/dev/null || true)
|
||||
if [ -z "$COMMITS" ]; then
|
||||
BODY="暂无提交记录。"
|
||||
else
|
||||
CAT_FEAT=""
|
||||
CAT_FIX=""
|
||||
CAT_PERF=""
|
||||
CAT_REFACTOR=""
|
||||
CAT_I18N=""
|
||||
CAT_OTHER=""
|
||||
|
||||
while IFS= read -r line; do
|
||||
[ -z "$line" ] && continue
|
||||
case "$line" in
|
||||
✨*|*feat*) CAT_FEAT="${CAT_FEAT}\n- ${line}" ;;
|
||||
🐛*|*fix*) CAT_FIX="${CAT_FIX}\n- ${line}" ;;
|
||||
⚡*|*perf*) CAT_PERF="${CAT_PERF}\n- ${line}" ;;
|
||||
♻️*|*refactor*) CAT_REFACTOR="${CAT_REFACTOR}\n- ${line}" ;;
|
||||
🌐*) CAT_I18N="${CAT_I18N}\n- ${line}" ;;
|
||||
🔧*|🔨*|*chore*) CAT_OTHER="${CAT_OTHER}\n- ${line}" ;;
|
||||
*) CAT_OTHER="${CAT_OTHER}\n- ${line}" ;;
|
||||
esac
|
||||
done <<< "$COMMITS"
|
||||
|
||||
BODY=""
|
||||
[ -n "$CAT_FEAT" ] && BODY="${BODY}## ✨ 新功能\n${CAT_FEAT}\n\n"
|
||||
[ -n "$CAT_FIX" ] && BODY="${BODY}## 🐛 问题修复\n${CAT_FIX}\n\n"
|
||||
[ -n "$CAT_PERF" ] && BODY="${BODY}## ⚡ 性能优化\n${CAT_PERF}\n\n"
|
||||
[ -n "$CAT_REFACTOR" ] && BODY="${BODY}## ♻️ 重构\n${CAT_REFACTOR}\n\n"
|
||||
[ -n "$CAT_I18N" ] && BODY="${BODY}## 🌐 国际化\n${CAT_I18N}\n\n"
|
||||
[ -n "$CAT_OTHER" ] && BODY="${BODY}## 🔧 其他变更\n${CAT_OTHER}\n\n"
|
||||
|
||||
# 附加 compare 链接
|
||||
if [ -n "$PREV_TAG" ]; then
|
||||
REPO_URL="${{ github.server_url }}/${{ github.repository }}"
|
||||
BODY="${BODY}---\n**完整变更**: [${PREV_TAG}...${TAG}](${REPO_URL}/compare/${PREV_TAG}...${TAG})\n"
|
||||
fi
|
||||
fi
|
||||
|
||||
# 写入到文件避免多行环境变量问题
|
||||
printf '%b' "$BODY" > /tmp/changelog.md
|
||||
echo "changelog_file=/tmp/changelog.md" >> "$GITHUB_OUTPUT"
|
||||
|
||||
- name: Create Release
|
||||
uses: softprops/action-gh-release@v2
|
||||
if: startsWith(github.ref, 'refs/tags/')
|
||||
@@ -620,6 +688,6 @@ jobs:
|
||||
files: release-assets/*
|
||||
draft: true
|
||||
make_latest: true
|
||||
generate_release_notes: true
|
||||
body_path: ${{ steps.changelog.outputs.changelog_file }}
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
1
frontend/public/db-icons/clickhouse.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>ClickHouse</title><path d="M21.333 10H24v4h-2.667ZM16 1.335h2.667v21.33H16Zm-5.333 0h2.666v21.33h-2.666ZM0 22.665V1.335h2.667v21.33zm5.333-21.33H8v21.33H5.333Z"/></svg>
|
||||
|
After Width: | Height: | Size: 246 B |
1
frontend/public/db-icons/diros.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Apache Doris</title><path d="M8.666.0001c-.5355-.004-1.068.1072-1.5241.3384-.207.1048-.5749.3802-.8177.6118-1.0278.9803-1.2876 2.5138-.6553 3.8679.205.439.5068.7694 2.8476 3.1166 2.4527 2.4594 2.6352 2.6255 2.8852 2.6258.2446.0003.3647-.099 1.4408-1.19.9367-.9496 1.2306-1.2992 1.4536-1.7286.5966-1.149.6487-2.0513.174-3.014-.2264-.459-.4816-.7514-1.9012-2.176-.9018-.9052-1.7907-1.7496-1.9751-1.8765C10.0488.2005 9.3548.0052 8.666 0ZM3.5518 5.5737c-.2176.0031-.6097.085-.6097.3285v12.0904l.1642.175c.1123.1194.2498.1748.4342.1748.2545 0 .4436-.1738 3.349-3.0786 2.6868-2.6862 3.079-2.909 3.0791-3.305.0002-.3961-.3924-.6194-3.0784-3.306-2.8612-2.8619-3.0968-3.079-3.3384-3.079Zm13.0967.861c-.0481.0184-.112.1636-.1418.3225-.0756.403-.3719 1.109-.6572 1.5663-.1407.2253-2.2392 2.3955-5.049 5.2212-2.7513 2.7667-4.9104 4.9985-5.0468 5.2165-.4552.7275-.5967 1.3905-.4684 2.1964.222 1.3947 1.3263 2.6812 2.5486 2.9693.4667.11 1.618.0927 2.0329-.0305.2084-.062.526-.2112.7055-.3318.5023-.3373 9.341-9.0562 9.6463-9.5154.449-.6753.8356-1.0716.8395-1.9762-.0056-.5935-.1305-1.1138-1.0715-2.306-.5094-.6523-3.2341-3.3723-3.338-3.3324Z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1
frontend/public/db-icons/duckdb.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>DuckDB</title><path d="M12 0C5.363 0 0 5.363 0 12s5.363 12 12 12 12-5.363 12-12S18.637 0 12 0zM9.502 7.03a4.974 4.974 0 0 1 4.97 4.97 4.974 4.974 0 0 1-4.97 4.97A4.974 4.974 0 0 1 4.532 12a4.974 4.974 0 0 1 4.97-4.97zm6.563 3.183h2.351c.98 0 1.787.782 1.787 1.762s-.807 1.789-1.787 1.789h-2.351v-3.551z"/></svg>
|
||||
|
After Width: | Height: | Size: 389 B |
1
frontend/public/db-icons/mariadb.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>MariaDB</title><path d="M23.157 4.412c-.676.284-.79.31-1.673.372-.65.045-.757.057-1.212.209-.75.246-1.395.75-2.02 1.59-.296.398-1.249 1.913-1.249 1.988 0 .057-.65.998-.915 1.32-.574.713-1.08 1.079-2.14 1.59-.77.36-1.224.524-4.102 1.477-1.073.353-2.133.738-2.367.864-.852.449-1.515 1.036-2.203 1.938-1.003 1.32-.972 1.313-3.042.947a12.264 12.264 0 00-.675-.063c-.644-.05-1.023.044-1.332.334L0 17.193l.177.088c.094.05.353.234.561.398.215.17.461.347.55.391.088.044.17.088.183.101.012.013-.089.17-.228.353-.435.581-.593.871-.574 1.048.019.164.032.17.43.17.517-.006.826-.056 1.261-.208.65-.233 2.058-.94 2.784-1.4.776-.5 1.717-.998 1.956-1.042.082-.02.354-.07.594-.114.58-.107 1.464-.095 2.587.05.108.013.373.045.6.064.227.025.43.057.454.076.026.012.474.037.998.056.934.026 1.104.007 1.3-.189.126-.133.385-.631.498-.985.209-.643.417-.921.366-.492-.113.966-.322 1.692-.713 2.411-.259.499-.663 1.092-.934 1.395-.322.347-.315.36.088.315.619-.063 1.471-.397 2.096-.82.827-.562 1.647-1.691 2.19-3.03.107-.27.22-.22.183.083-.013.094-.038.315-.057.498l-.031.328.353-.202c.833-.48 1.414-1.262 2.127-2.884.227-.518.877-2.922 1.073-3.976a9.64 9.64 0 01.271-1.042c.127-.429.196-.555.48-.858.183-.19.625-.555.978-.808.72-.505.953-.75 1.187-1.205.208-.417.284-1.13.132-1.357-.132-.202-.284-.196-.763.006Z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
1
frontend/public/db-icons/mongodb.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>MongoDB</title><path d="M17.193 9.555c-1.264-5.58-4.252-7.414-4.573-8.115-.28-.394-.53-.954-.735-1.44-.036.495-.055.685-.523 1.184-.723.566-4.438 3.682-4.74 10.02-.282 5.912 4.27 9.435 4.888 9.884l.07.05A73.49 73.49 0 0111.91 24h.481c.114-1.032.284-2.056.51-3.07.417-.296.604-.463.85-.693a11.342 11.342 0 003.639-8.464c.01-.814-.103-1.662-.197-2.218zm-5.336 8.195s0-8.291.275-8.29c.213 0 .49 10.695.49 10.695-.381-.045-.765-1.76-.765-2.405z"/></svg>
|
||||
|
After Width: | Height: | Size: 527 B |
1
frontend/public/db-icons/mysql.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>MySQL</title><path d="M16.405 5.501c-.115 0-.193.014-.274.033v.013h.014c.054.104.146.18.214.273.054.107.1.214.154.32l.014-.015c.094-.066.14-.172.14-.333-.04-.047-.046-.094-.08-.14-.04-.067-.126-.1-.18-.153zM5.77 18.695h-.927a50.854 50.854 0 00-.27-4.41h-.008l-1.41 4.41H2.45l-1.4-4.41h-.01a72.892 72.892 0 00-.195 4.41H0c.055-1.966.192-3.81.41-5.53h1.15l1.335 4.064h.008l1.347-4.064h1.095c.242 2.015.384 3.86.428 5.53zm4.017-4.08c-.378 2.045-.876 3.533-1.492 4.46-.482.716-1.01 1.073-1.583 1.073-.153 0-.34-.046-.566-.138v-.494c.11.017.24.026.386.026.268 0 .483-.075.647-.222.197-.18.295-.382.295-.605 0-.155-.077-.47-.23-.944L6.23 14.615h.91l.727 2.36c.164.536.233.91.205 1.123.4-1.064.678-2.227.835-3.483zm12.325 4.08h-2.63v-5.53h.885v4.85h1.745zm-3.32.135l-1.016-.5c.09-.076.177-.158.255-.25.433-.506.648-1.258.648-2.253 0-1.83-.718-2.746-2.155-2.746-.704 0-1.254.232-1.65.697-.43.508-.646 1.256-.646 2.245 0 .972.19 1.686.574 2.14.35.41.877.615 1.583.615.264 0 .506-.033.725-.098l1.325.772.36-.622zM15.5 17.588c-.225-.36-.337-.94-.337-1.736 0-1.393.424-2.09 1.27-2.09.443 0 .77.167.977.5.224.362.336.936.336 1.723 0 1.404-.424 2.108-1.27 2.108-.445 0-.77-.167-.978-.5zm-1.658-.425c0 .47-.172.856-.516 1.156-.344.3-.803.45-1.384.45-.543 0-1.064-.172-1.573-.515l.237-.476c.438.22.833.328 1.19.328.332 0 .593-.073.783-.22a.754.754 0 00.3-.615c0-.33-.23-.61-.648-.845-.388-.213-1.163-.657-1.163-.657-.422-.307-.632-.636-.632-1.177 0-.45.157-.81.47-1.085.315-.278.72-.415 1.22-.415.512 0 .98.136 1.4.41l-.213.476a2.726 2.726 0 00-1.064-.23c-.283 0-.502.068-.654.206a.685.685 0 00-.248.524c0 .328.234.61.666.85.393.215 1.187.67 1.187.67.433.305.648.63.648 1.168zm9.382-5.852c-.535-.014-.95.04-1.297.188-.1.04-.26.04-.274.167.055.053.063.14.11.214.08.134.218.313.346.407.14.11.28.216.427.31.26.16.555.255.81.416.145.094.293.213.44.313.073.05.12.14.214.172v-.02c-.046-.06-.06-.147-.105-.214-.067-.067-.134-.127-.2-.193a3.223 3.223 0 00-.695-.675c-.214-.146-.682-.35-.77-.595l-.013-.014c.146-.013.32-.066.46-.106.227-.06.435-.047.67-.106.106-.027.213-.06.32-.094v-.06c-.12-.12-.21-.283-.334-.395a8.867 8.867 0 00-1.104-.823c-.21-.134-.476-.22-.697-.334-.08-.04-.214-.06-.26-.127-.12-.146-.19-.34-.275-.514a17.69 17.69 0 01-.547-1.163c-.12-.262-.193-.523-.34-.763-.69-1.137-1.437-1.826-2.586-2.5-.247-.14-.543-.2-.856-.274-.167-.008-.334-.02-.5-.027-.11-.047-.216-.174-.31-.235-.38-.24-1.364-.76-1.644-.072-.18.434.267.862.422 1.082.115.153.26.328.34.5.047.116.06.235.107.356.106.294.207.622.347.897.073.14.153.287.247.413.054.073.146.107.167.227-.094.136-.1.334-.154.5-.24.757-.146 1.693.194 2.25.107.166.362.534.703.393.3-.12.234-.5.32-.835.02-.08.007-.133.048-.187v.015c.094.188.188.367.274.555.206.328.566.668.867.895.16.12.287.328.487.402v-.02h-.015c-.043-.058-.1-.086-.154-.133a3.445 3.445 0 01-.35-.4 8.76 8.76 0 01-.747-1.218c-.11-.21-.202-.436-.29-.643-.04-.08-.04-.2-.107-.24-.1.146-.247.273-.32.453-.127.288-.14.642-.188 1.01-.027.007-.014 0-.027.014-.214-.052-.287-.274-.367-.46-.2-.475-.233-1.238-.06-1.785.047-.14.247-.582.167-.716-.042-.127-.174-.2-.247-.303a2.478 2.478 0 01-.24-.427c-.16-.374-.24-.788-.414-1.162-.08-.173-.22-.354-.334-.513-.127-.18-.267-.307-.368-.52-.033-.073-.08-.194-.027-.274.014-.054.042-.075.094-.09.088-.072.335.022.422.062.247.1.455.194.662.334.094.066.195.193.315.226h.14c.214.047.455.014.655.073.355.114.675.28.962.46a5.953 5.953 0 012.085 2.286c.08.154.115.295.188.455.14.33.313.663.455.982.14.315.275.636.476.897.1.14.502.213.682.286.133.06.34.115.46.188.23.14.454.3.67.454.11.076.443.243.463.378z"/></svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
1
frontend/public/db-icons/postgres.svg
Normal file
|
After Width: | Height: | Size: 5.1 KiB |
1
frontend/public/db-icons/redis.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Redis</title><path d="M22.71 13.145c-1.66 2.092-3.452 4.483-7.038 4.483-3.203 0-4.397-2.825-4.48-5.12.701 1.484 2.073 2.685 4.214 2.63 4.117-.133 6.94-3.852 6.94-7.239 0-4.05-3.022-6.972-8.268-6.972-3.752 0-8.4 1.428-11.455 3.685C2.59 6.937 3.885 9.958 4.35 9.626c2.648-1.904 4.748-3.13 6.784-3.744C8.12 9.244.886 17.05 0 18.425c.1 1.261 1.66 4.648 2.424 4.648.232 0 .431-.133.664-.365a100.49 100.49 0 0 0 5.54-6.765c.222 3.104 1.748 6.898 6.014 6.898 3.819 0 7.604-2.756 9.33-8.965.2-.764-.73-1.361-1.261-.73zm-4.349-5.013c0 1.959-1.926 2.922-3.685 2.922-.941 0-1.664-.247-2.235-.568 1.051-1.592 2.092-3.225 3.21-4.973 1.972.334 2.71 1.43 2.71 2.619z"/></svg>
|
||||
|
After Width: | Height: | Size: 738 B |
1
frontend/public/db-icons/sphinx.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Sphinx</title><path d="M16.284 19.861c0-.654.177-1.834.393-2.623.499-1.822.774-4.079.497-4.079-.116 0-.959.762-1.873 1.694-3.472 3.54-7.197 5.543-10.312 5.543-1.778 0-2.987-.45-4.154-1.545C.128 18.186 0 17.858 0 16.703c0-1.188.117-1.468.909-2.175.718-.642 1.171-.813 2.157-.813.76.171 1.21.16 1.457.461.251.296.338 1.265.035 1.832-.162.303-.585.491-1.105.491-.49 0-.77-.116-.669-.278.315-.511-.135-.857-.713-.548-.699.374-.711 1.698-.021 2.322.969.878 3.65 1.208 5.262.648 1.743-.605 4.022-2.061 5.841-3.732l1.6-1.469-2.088-.013c-2.186-.012-3.608-.273-8.211-1.506-1.531-.41-3.003-.765-3.271-.789-.304-.026-.503-.274-.487-.656.027-.646.378-1.127.793-1.308.249-.109 1.977-.274 3.809-.761 7.136-1.898 7.569-1.629 12.323-.426 1.553.393 3.351.821 4.147.835 1.227.022 1.493.124 1.74.666.16.351.291.686.291.745 0 .058-.695.424-1.545.813-3.12 1.428-4.104 2.185-3.088 3.635.421.602.412.666-.14 1.052-.323.227-.59.687-.593 1.022-.009.908-.583 2.856-1.417 3.624l-.732.675v-1.189Zm1.594-8.328c1.242-.346 1.994-.738 3.539-1.562-1.272-.372-4.462-.895-4.462-.895-2.354-.472-2.108-.448-2.214.071a3.475 3.475 0 0 1-.45 1.105c-.541.848-2.521 1.026-3.656.483-.356-.171-.714-.821-.709-1.283.007-.65-.362-.801-.598-.714-.191.07-.813.079-2.179.448-4.514 1.217-5.132 1.078-2.189 1.495.353.05 2.223.572 3.136.815 2.239.597 2.658.641 5.556.581 2.015-.042 2.858-.163 4.226-.544ZM.732 6.258c.056-.577.088-.702 1.692-1.025.919-.185 3.185-.785 5.036-1.333 4.254-1.26 5.462-1.263 9.873-.026 1.904.535 4.037.973 4.74.975 1.097.002 1.668.487 1.668.487.505 1.16.412 1.24-1.558 1.24-1.374 0-2.558-.232-4.385-.857-1.389-.476-3.369-.923-4.451-1.004-1.974-.149-1.971-.15-8.072 1.529-1.072.295-2.553.624-3.29.732l-1.342.196.089-.914Z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
1
frontend/public/db-icons/sqlite.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>SQLite</title><path d="M21.678.521c-1.032-.92-2.28-.55-3.513.544a8.71 8.71 0 0 0-.547.535c-2.109 2.237-4.066 6.38-4.674 9.544.237.48.422 1.093.544 1.561a13.044 13.044 0 0 1 .164.703s-.019-.071-.096-.296l-.05-.146a1.689 1.689 0 0 0-.033-.08c-.138-.32-.518-.995-.686-1.289-.143.423-.27.818-.376 1.176.484.884.778 2.4.778 2.4s-.025-.099-.147-.442c-.107-.303-.644-1.244-.772-1.464-.217.804-.304 1.346-.226 1.478.152.256.296.698.422 1.186.286 1.1.485 2.44.485 2.44l.017.224a22.41 22.41 0 0 0 .056 2.748c.095 1.146.273 2.13.5 2.657l.155-.084c-.334-1.038-.47-2.399-.41-3.967.09-2.398.642-5.29 1.661-8.304 1.723-4.55 4.113-8.201 6.3-9.945-1.993 1.8-4.692 7.63-5.5 9.788-.904 2.416-1.545 4.684-1.931 6.857.666-2.037 2.821-2.912 2.821-2.912s1.057-1.304 2.292-3.166c-.74.169-1.955.458-2.362.629-.6.251-.762.337-.762.337s1.945-1.184 3.613-1.72C21.695 7.9 24.195 2.767 21.678.521m-18.573.543A1.842 1.842 0 0 0 1.27 2.9v16.608a1.84 1.84 0 0 0 1.835 1.834h9.418a22.953 22.953 0 0 1-.052-2.707c-.006-.062-.011-.141-.016-.2a27.01 27.01 0 0 0-.473-2.378c-.121-.47-.275-.898-.369-1.057-.116-.197-.098-.31-.097-.432 0-.12.015-.245.037-.386a9.98 9.98 0 0 1 .234-1.045l.217-.028c-.017-.035-.014-.065-.031-.097l-.041-.381a32.8 32.8 0 0 1 .382-1.194l.2-.019c-.008-.016-.01-.038-.018-.053l-.043-.316c.63-3.28 2.587-7.443 4.8-9.791.066-.069.133-.128.198-.194Z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -1,8 +1,8 @@
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import React, { useState, useEffect, useMemo, useCallback } from 'react';
|
||||
import { Layout, Button, ConfigProvider, theme, message, Modal, Spin, Slider, Progress, Switch, Input, InputNumber, Select } from 'antd';
|
||||
import zhCN from 'antd/locale/zh_CN';
|
||||
import { PlusOutlined, ConsoleSqlOutlined, UploadOutlined, DownloadOutlined, CloudDownloadOutlined, BugOutlined, ToolOutlined, GlobalOutlined, InfoCircleOutlined, GithubOutlined, SkinOutlined, CheckOutlined, MinusOutlined, BorderOutlined, CloseOutlined, SettingOutlined, LinkOutlined, BgColorsOutlined, AppstoreOutlined } from '@ant-design/icons';
|
||||
import { BrowserOpenURL, Environment, EventsOn, Quit, WindowFullscreen, WindowGetSize, WindowIsFullscreen, WindowIsMaximised, WindowMaximise, WindowMinimise, WindowSetSize, WindowToggleMaximise, WindowUnfullscreen } from '../wailsjs/runtime';
|
||||
import { BrowserOpenURL, Environment, EventsOn, Quit, WindowFullscreen, WindowGetPosition, WindowGetSize, WindowIsFullscreen, WindowIsMaximised, WindowMaximise, WindowMinimise, WindowSetPosition, WindowSetSize, WindowToggleMaximise, WindowUnfullscreen } from '../wailsjs/runtime';
|
||||
import Sidebar from './components/Sidebar';
|
||||
import TabManager from './components/TabManager';
|
||||
import ConnectionModal from './components/ConnectionModal';
|
||||
@@ -89,7 +89,8 @@ function App() {
|
||||
const [runtimePlatform, setRuntimePlatform] = useState('');
|
||||
const [isLinuxRuntime, setIsLinuxRuntime] = useState(false);
|
||||
const [isStoreHydrated, setIsStoreHydrated] = useState(() => useStore.persist.hasHydrated());
|
||||
const [sidebarWidth, setSidebarWidth] = useState(330);
|
||||
const sidebarWidth = useStore(state => state.sidebarWidth);
|
||||
const setSidebarWidth = useStore(state => state.setSidebarWidth);
|
||||
const globalProxyInvalidHintShownRef = React.useRef(false);
|
||||
|
||||
// 同步 macOS 窗口透明度:opacity=1.0 且 blur=0 时关闭 NSVisualEffectView,
|
||||
@@ -285,14 +286,43 @@ function App() {
|
||||
}, applyRetryDelayMs);
|
||||
};
|
||||
|
||||
const restoreWindowState = async () => {
|
||||
if (cancelled) return;
|
||||
const state = useStore.getState();
|
||||
// startupFullscreen 设置优先
|
||||
if (state.startupFullscreen) {
|
||||
applyStartupWindowPreference(1);
|
||||
return;
|
||||
}
|
||||
// 根据上次保存的窗口状态恢复
|
||||
const savedState = state.windowState;
|
||||
if (savedState === 'fullscreen') {
|
||||
applyStartupWindowPreference(1);
|
||||
return;
|
||||
}
|
||||
if (savedState === 'maximized') {
|
||||
try { await WindowMaximise(); } catch (_) {}
|
||||
return;
|
||||
}
|
||||
// 普通窗口:恢复尺寸和位置
|
||||
const bounds = state.windowBounds;
|
||||
if (!bounds || bounds.width < 400 || bounds.height < 300) return;
|
||||
try {
|
||||
WindowSetSize(bounds.width, bounds.height);
|
||||
WindowSetPosition(bounds.x, bounds.y);
|
||||
} catch (e) {
|
||||
console.warn('Failed to restore window bounds', e);
|
||||
}
|
||||
};
|
||||
|
||||
if (useStore.persist.hasHydrated()) {
|
||||
applyStartupWindowPreference(1);
|
||||
void restoreWindowState();
|
||||
}
|
||||
const unsubscribeHydration = useStore.persist.onFinishHydration(() => {
|
||||
if (cancelled) {
|
||||
return;
|
||||
}
|
||||
applyStartupWindowPreference(1);
|
||||
void restoreWindowState();
|
||||
});
|
||||
|
||||
return () => {
|
||||
@@ -304,6 +334,52 @@ function App() {
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 定时保存窗口状态、尺寸与位置
|
||||
useEffect(() => {
|
||||
const SAVE_INTERVAL_MS = 2000;
|
||||
let lastSaved = '';
|
||||
|
||||
const saveWindowState = async () => {
|
||||
try {
|
||||
const [isFs, isMax] = await Promise.all([
|
||||
WindowIsFullscreen().catch(() => false),
|
||||
WindowIsMaximised().catch(() => false),
|
||||
]);
|
||||
|
||||
// 保存窗口状态
|
||||
const store = useStore.getState();
|
||||
const newState = isFs ? 'fullscreen' : (isMax ? 'maximized' : 'normal');
|
||||
if (store.windowState !== newState) {
|
||||
store.setWindowState(newState);
|
||||
}
|
||||
|
||||
// 只在普通窗口模式下保存尺寸和位置
|
||||
if (isFs || isMax) return;
|
||||
|
||||
const [size, pos] = await Promise.all([
|
||||
WindowGetSize().catch(() => null),
|
||||
WindowGetPosition().catch(() => null),
|
||||
]);
|
||||
if (!size || !pos) return;
|
||||
const w = Math.trunc(Number(size.w || 0));
|
||||
const h = Math.trunc(Number(size.h || 0));
|
||||
const x = Math.trunc(Number(pos.x || 0));
|
||||
const y = Math.trunc(Number(pos.y || 0));
|
||||
if (w < 400 || h < 300) return;
|
||||
|
||||
const key = `${w},${h},${x},${y}`;
|
||||
if (key === lastSaved) return;
|
||||
lastSaved = key;
|
||||
store.setWindowBounds({ width: w, height: h, x, y });
|
||||
} catch (e) {
|
||||
// 静默忽略
|
||||
}
|
||||
};
|
||||
|
||||
const timer = window.setInterval(saveWindowState, SAVE_INTERVAL_MS);
|
||||
return () => window.clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isWindowsPlatform()) {
|
||||
return;
|
||||
@@ -581,6 +657,7 @@ function App() {
|
||||
const activeTabId = useStore(state => state.activeTabId);
|
||||
const updateCheckInFlightRef = React.useRef(false);
|
||||
const updateDownloadInFlightRef = React.useRef(false);
|
||||
const updateUserDismissedRef = React.useRef(false);
|
||||
const updateDownloadedVersionRef = React.useRef<string | null>(null);
|
||||
const updateInstallTriggeredVersionRef = React.useRef<string | null>(null);
|
||||
const updateDownloadMetaRef = React.useRef<UpdateDownloadResultData | null>(null);
|
||||
@@ -669,6 +746,7 @@ function App() {
|
||||
return;
|
||||
}
|
||||
updateDownloadInFlightRef.current = true;
|
||||
updateUserDismissedRef.current = false;
|
||||
updateDownloadMetaRef.current = null;
|
||||
setUpdateDownloadProgress({
|
||||
open: true,
|
||||
@@ -713,7 +791,18 @@ function App() {
|
||||
} else {
|
||||
void message.success({ content: '更新下载完成', duration: 2 });
|
||||
}
|
||||
setAboutUpdateStatus(`发现新版本 ${info.latestVersion}(已下载,请点击“下载进度”后安装)`);
|
||||
setAboutUpdateStatus(`发现新版本 ${info.latestVersion}(已下载,请点击"下载进度"后安装)`);
|
||||
// macOS:如果用户没有主动隐藏进度弹窗,则下载完成后自动打开下载目录
|
||||
if (isMacRuntime && !updateUserDismissedRef.current) {
|
||||
try {
|
||||
const openRes = await (window as any).go.app.App.OpenDownloadedUpdateDirectory();
|
||||
if (openRes?.success) {
|
||||
void message.success(openRes?.message || '已打开安装目录,请手动完成替换');
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('自动打开下载目录失败', e);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
setUpdateDownloadProgress(prev => ({
|
||||
...prev,
|
||||
@@ -744,18 +833,34 @@ function App() {
|
||||
&& updateDownloadProgress.version === lastUpdateInfo?.latestVersion
|
||||
&& (updateDownloadProgress.status === 'start'
|
||||
|| updateDownloadProgress.status === 'downloading'
|
||||
|| updateDownloadProgress.status === 'done'
|
||||
|| updateDownloadProgress.status === 'error');
|
||||
const canShowProgressEntry = (isLatestUpdateDownloaded || isBackgroundProgressForLatestUpdate)
|
||||
&& updateInstallTriggeredVersionRef.current !== (lastUpdateInfo?.latestVersion || null);
|
||||
|
||||
const handleInstallFromProgress = React.useCallback(async () => {
|
||||
if (updateDownloadProgress.status !== 'done') {
|
||||
// 允许从下载进度弹窗(status=done)或关于弹窗(isLatestUpdateDownloaded=true)触发
|
||||
const canInstall = updateDownloadProgress.status === 'done'
|
||||
|| (Boolean(lastUpdateInfo?.hasUpdate) && (Boolean(lastUpdateInfo?.downloaded) || updateDownloadedVersionRef.current === lastUpdateInfo?.latestVersion));
|
||||
if (!canInstall) {
|
||||
return;
|
||||
}
|
||||
if (isMacRuntime) {
|
||||
const res = await (window as any).go.app.App.OpenDownloadedUpdateDirectory();
|
||||
if (!res?.success) {
|
||||
void message.error('打开安装目录失败: ' + (res?.message || '未知错误'));
|
||||
// 文件可能已被用户删除,清除已下载状态以允许重新下载
|
||||
updateDownloadedVersionRef.current = null;
|
||||
updateDownloadMetaRef.current = null;
|
||||
setUpdateDownloadProgress(prev => ({
|
||||
...prev,
|
||||
status: 'idle',
|
||||
percent: 0,
|
||||
downloaded: 0,
|
||||
open: false,
|
||||
}));
|
||||
setLastUpdateInfo(prev => prev ? { ...prev, downloaded: false, downloadPath: undefined } : prev);
|
||||
setAboutUpdateStatus(prev => prev.replace('已下载', '未下载'));
|
||||
return;
|
||||
}
|
||||
updateInstallTriggeredVersionRef.current = updateDownloadProgress.version || lastUpdateInfo?.latestVersion || null;
|
||||
@@ -770,7 +875,7 @@ function App() {
|
||||
}
|
||||
updateInstallTriggeredVersionRef.current = updateDownloadProgress.version || lastUpdateInfo?.latestVersion || null;
|
||||
hideUpdateDownloadProgress();
|
||||
}, [hideUpdateDownloadProgress, isMacRuntime, lastUpdateInfo?.latestVersion, updateDownloadProgress.status, updateDownloadProgress.version]);
|
||||
}, [hideUpdateDownloadProgress, isMacRuntime, lastUpdateInfo?.latestVersion, lastUpdateInfo?.hasUpdate, lastUpdateInfo?.downloaded, updateDownloadProgress.status, updateDownloadProgress.version]);
|
||||
|
||||
const checkForUpdates = React.useCallback(async (silent: boolean) => {
|
||||
if (updateCheckInFlightRef.current) return;
|
||||
@@ -791,6 +896,11 @@ function App() {
|
||||
if (!info) return;
|
||||
const aboutOpen = isAboutOpenRef.current;
|
||||
if (info.hasUpdate) {
|
||||
// 以后端校验为准:如果后端确认文件不存在(downloaded=false),清除本地 ref
|
||||
if (!info.downloaded && updateDownloadedVersionRef.current === info.latestVersion) {
|
||||
updateDownloadedVersionRef.current = null;
|
||||
updateDownloadMetaRef.current = null;
|
||||
}
|
||||
const localDownloaded = updateDownloadedVersionRef.current === info.latestVersion;
|
||||
const hasDownloaded = Boolean(info.downloaded) || localDownloaded;
|
||||
if (hasDownloaded) {
|
||||
@@ -910,28 +1020,34 @@ function App() {
|
||||
setAboutLoading(false);
|
||||
}, []);
|
||||
|
||||
const handleNewQuery = () => {
|
||||
let connId = activeContext?.connectionId || '';
|
||||
let db = activeContext?.dbName || '';
|
||||
const handleNewQuery = useCallback(() => {
|
||||
let connId = '';
|
||||
let db = '';
|
||||
|
||||
// Priority: Active Tab Context > Sidebar Selection
|
||||
// Priority: Active Tab Context (if connection still valid) > Sidebar Selection (activeContext)
|
||||
if (activeTabId) {
|
||||
const currentTab = tabs.find(t => t.id === activeTabId);
|
||||
if (currentTab && currentTab.connectionId) {
|
||||
if (currentTab && currentTab.connectionId && connections.some(c => c.id === currentTab.connectionId)) {
|
||||
connId = currentTab.connectionId;
|
||||
db = currentTab.dbName || '';
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback: Sidebar selection context (only if connection still valid)
|
||||
if (!connId && activeContext?.connectionId && connections.some(c => c.id === activeContext.connectionId)) {
|
||||
connId = activeContext.connectionId;
|
||||
db = activeContext.dbName || '';
|
||||
}
|
||||
|
||||
addTab({
|
||||
id: `query-${Date.now()}`,
|
||||
id: `query-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
|
||||
title: '新建查询',
|
||||
type: 'query',
|
||||
connectionId: connId,
|
||||
dbName: db,
|
||||
query: ''
|
||||
});
|
||||
};
|
||||
}, [activeTabId, tabs, connections, activeContext, addTab]);
|
||||
|
||||
const handleImportConnections = async () => {
|
||||
const res = await (window as any).go.app.App.ImportConfigFile();
|
||||
@@ -1635,19 +1751,24 @@ function App() {
|
||||
title={renderUtilityModalTitle(<InfoCircleOutlined />, '关于 GoNavi', '查看版本信息、仓库地址、更新状态与下载入口。')}
|
||||
open={isAboutOpen}
|
||||
onCancel={() => setIsAboutOpen(false)}
|
||||
styles={{ content: utilityModalShellStyle, header: { background: 'transparent', borderBottom: 'none', paddingBottom: 8 }, body: { paddingTop: 8 }, footer: { background: 'transparent', borderTop: 'none', paddingTop: 10 } }}
|
||||
styles={{ content: utilityModalShellStyle, header: { background: 'transparent', borderBottom: 'none', paddingBottom: 8 }, body: { paddingTop: 8 }, footer: { background: 'transparent', borderTop: 'none', paddingTop: 10, display: 'flex', flexWrap: 'wrap', gap: 10, justifyContent: 'flex-end' } }}
|
||||
footer={[
|
||||
canShowProgressEntry ? (
|
||||
isBackgroundProgressForLatestUpdate && !isLatestUpdateDownloaded ? (
|
||||
<Button key="progress" icon={<DownloadOutlined />} onClick={showUpdateDownloadProgress}>下载进度</Button>
|
||||
) : null,
|
||||
lastUpdateInfo?.hasUpdate && !isLatestUpdateDownloaded ? (
|
||||
<Button key="download" icon={<DownloadOutlined />} onClick={() => downloadUpdate(lastUpdateInfo, false)}>下载更新</Button>
|
||||
) : null,
|
||||
lastUpdateInfo?.hasUpdate ? (
|
||||
lastUpdateInfo?.hasUpdate && !isLatestUpdateDownloaded && !isBackgroundProgressForLatestUpdate ? (
|
||||
<Button key="mute" onClick={() => { updateMutedVersionRef.current = lastUpdateInfo.latestVersion; setIsAboutOpen(false); }}>本次不再提示</Button>
|
||||
) : null,
|
||||
<Button key="check" icon={<CloudDownloadOutlined />} onClick={() => checkForUpdates(false)}>检查更新</Button>,
|
||||
<Button key="close" type="primary" onClick={() => setIsAboutOpen(false)}>关闭</Button>
|
||||
<Button key="close" onClick={() => setIsAboutOpen(false)}>关闭</Button>,
|
||||
lastUpdateInfo?.hasUpdate && !isLatestUpdateDownloaded && !isBackgroundProgressForLatestUpdate ? (
|
||||
<Button key="download" type="primary" icon={<DownloadOutlined />} onClick={() => downloadUpdate(lastUpdateInfo, false)}>下载更新</Button>
|
||||
) : null,
|
||||
isLatestUpdateDownloaded ? (
|
||||
<Button key="install-direct" type="primary" icon={<DownloadOutlined />} onClick={handleInstallFromProgress}>
|
||||
{isMacRuntime ? '打开安装目录' : '安装更新'}
|
||||
</Button>
|
||||
) : null,
|
||||
].filter(Boolean)}
|
||||
>
|
||||
{aboutLoading ? (
|
||||
@@ -2080,7 +2201,10 @@ function App() {
|
||||
footer={updateDownloadProgress.status === 'start' || updateDownloadProgress.status === 'downloading' ? [
|
||||
<Button
|
||||
key="background"
|
||||
onClick={hideUpdateDownloadProgress}
|
||||
onClick={() => {
|
||||
updateUserDismissedRef.current = true;
|
||||
hideUpdateDownloadProgress();
|
||||
}}
|
||||
>
|
||||
隐藏到后台
|
||||
</Button>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useState, useEffect, useRef, useMemo } from 'react';
|
||||
import { Modal, Form, Input, InputNumber, Button, message, Checkbox, Divider, Select, Alert, Card, Row, Col, Typography, Collapse, Space, Table, Tag } from 'antd';
|
||||
import { DatabaseOutlined, ConsoleSqlOutlined, FileTextOutlined, CloudServerOutlined, AppstoreAddOutlined, CloudOutlined, CheckCircleFilled, CloseCircleFilled, LinkOutlined, EditOutlined, AppstoreOutlined } from '@ant-design/icons';
|
||||
import { DatabaseOutlined, ConsoleSqlOutlined, FileTextOutlined, CloudServerOutlined, AppstoreAddOutlined, CloudOutlined, CheckCircleFilled, CloseCircleFilled, LinkOutlined, EditOutlined, AppstoreOutlined, BgColorsOutlined } from '@ant-design/icons';
|
||||
import { getDbIcon, getDbDefaultColor, getDbIconLabel, DB_ICON_TYPES, PRESET_ICON_COLORS } from './DatabaseIcons';
|
||||
import { useStore } from '../store';
|
||||
import { buildOverlayWorkbenchTheme } from '../utils/overlayWorkbenchTheme';
|
||||
import { normalizeOpacityForPlatform, resolveAppearanceValues } from '../utils/appearance';
|
||||
@@ -105,7 +106,9 @@ const ConnectionModal: React.FC<{
|
||||
const [dbType, setDbType] = useState('mysql');
|
||||
const [step, setStep] = useState(1); // 1: Select Type, 2: Configure
|
||||
const [activeGroup, setActiveGroup] = useState(0); // Active category index in step 1
|
||||
const [activeConfigSection, setActiveConfigSection] = useState<'basic' | 'network'>('basic');
|
||||
const [activeConfigSection, setActiveConfigSection] = useState<'basic' | 'network' | 'appearance'>('basic');
|
||||
const [customIconType, setCustomIconType] = useState<string | undefined>(undefined);
|
||||
const [customIconColor, setCustomIconColor] = useState<string | undefined>(undefined);
|
||||
const [activeNetworkConfig, setActiveNetworkConfig] = useState<'ssl' | 'ssh' | 'proxy' | 'httpTunnel'>('ssl');
|
||||
const [testResult, setTestResult] = useState<{ type: 'success' | 'error', message: string } | null>(null);
|
||||
const [testErrorLogOpen, setTestErrorLogOpen] = useState(false);
|
||||
@@ -1061,6 +1064,8 @@ const ConnectionModal: React.FC<{
|
||||
setRedisDbList([]);
|
||||
setMongoMembers([]);
|
||||
setUriFeedback(null);
|
||||
setCustomIconType(undefined);
|
||||
setCustomIconColor(undefined);
|
||||
setTypeSelectWarning(null);
|
||||
setDriverStatusLoaded(false);
|
||||
void refreshDriverStatus();
|
||||
@@ -1146,6 +1151,8 @@ const ConnectionModal: React.FC<{
|
||||
mongoReplicaPassword: config.mongoReplicaPassword || ''
|
||||
});
|
||||
setUseSSL(!!config.useSSL);
|
||||
setCustomIconType(initialValues.iconType);
|
||||
setCustomIconColor(initialValues.iconColor);
|
||||
setUseSSH(config.useSSH || false);
|
||||
setUseProxy(hasProxy);
|
||||
setUseHttpTunnel(hasHttpTunnel);
|
||||
@@ -1212,7 +1219,9 @@ const ConnectionModal: React.FC<{
|
||||
name: values.name || (isFileDatabaseType(values.type) ? (values.type === 'duckdb' ? 'DuckDB DB' : 'SQLite DB') : (values.type === 'redis' ? `Redis ${displayHost}` : displayHost)),
|
||||
config: config,
|
||||
includeDatabases: values.includeDatabases,
|
||||
includeRedisDatabases: isRedisType ? values.includeRedisDatabases : undefined
|
||||
includeRedisDatabases: isRedisType ? values.includeRedisDatabases : undefined,
|
||||
iconType: customIconType,
|
||||
iconColor: customIconColor,
|
||||
};
|
||||
|
||||
if (initialValues) {
|
||||
@@ -1735,32 +1744,32 @@ const ConnectionModal: React.FC<{
|
||||
|
||||
const dbTypeGroups = [
|
||||
{ label: '关系型数据库', items: [
|
||||
{ key: 'mysql', name: 'MySQL', icon: <ConsoleSqlOutlined style={{ fontSize: 24, color: '#00758F' }} /> },
|
||||
{ key: 'mariadb', name: 'MariaDB', icon: <ConsoleSqlOutlined style={{ fontSize: 24, color: '#003545' }} /> },
|
||||
{ key: 'diros', name: 'Doris', icon: <ConsoleSqlOutlined style={{ fontSize: 24, color: '#0050b3' }} /> },
|
||||
{ key: 'sphinx', name: 'Sphinx', icon: <ConsoleSqlOutlined style={{ fontSize: 24, color: '#2F5D62' }} /> },
|
||||
{ key: 'clickhouse', name: 'ClickHouse', icon: <DatabaseOutlined style={{ fontSize: 24, color: '#FFCC01' }} /> },
|
||||
{ key: 'postgres', name: 'PostgreSQL', icon: <DatabaseOutlined style={{ fontSize: 24, color: '#336791' }} /> },
|
||||
{ key: 'sqlserver', name: 'SQL Server', icon: <DatabaseOutlined style={{ fontSize: 24, color: '#CC2927' }} /> },
|
||||
{ key: 'sqlite', name: 'SQLite', icon: <FileTextOutlined style={{ fontSize: 24, color: '#003B57' }} /> },
|
||||
{ key: 'duckdb', name: 'DuckDB', icon: <FileTextOutlined style={{ fontSize: 24, color: '#f59e0b' }} /> },
|
||||
{ key: 'oracle', name: 'Oracle', icon: <DatabaseOutlined style={{ fontSize: 24, color: '#F80000' }} /> },
|
||||
{ key: 'mysql', name: 'MySQL', icon: getDbIcon('mysql', undefined, 36) },
|
||||
{ key: 'mariadb', name: 'MariaDB', icon: getDbIcon('mariadb', undefined, 36) },
|
||||
{ key: 'diros', name: 'Doris', icon: getDbIcon('diros', undefined, 36) },
|
||||
{ key: 'sphinx', name: 'Sphinx', icon: getDbIcon('sphinx', undefined, 36) },
|
||||
{ key: 'clickhouse', name: 'ClickHouse', icon: getDbIcon('clickhouse', undefined, 36) },
|
||||
{ key: 'postgres', name: 'PostgreSQL', icon: getDbIcon('postgres', undefined, 36) },
|
||||
{ key: 'sqlserver', name: 'SQL Server', icon: getDbIcon('sqlserver', undefined, 36) },
|
||||
{ key: 'sqlite', name: 'SQLite', icon: getDbIcon('sqlite', undefined, 36) },
|
||||
{ key: 'duckdb', name: 'DuckDB', icon: getDbIcon('duckdb', undefined, 36) },
|
||||
{ key: 'oracle', name: 'Oracle', icon: getDbIcon('oracle', undefined, 36) },
|
||||
]},
|
||||
{ label: '国产数据库', items: [
|
||||
{ key: 'dameng', name: 'Dameng (达梦)', icon: <CloudServerOutlined style={{ fontSize: 24, color: '#1890ff' }} /> },
|
||||
{ key: 'kingbase', name: 'Kingbase (人大金仓)', icon: <DatabaseOutlined style={{ fontSize: 24, color: '#faad14' }} /> },
|
||||
{ key: 'highgo', name: 'HighGo (瀚高)', icon: <DatabaseOutlined style={{ fontSize: 24, color: '#00a854' }} /> },
|
||||
{ key: 'vastbase', name: 'Vastbase (海量)', icon: <DatabaseOutlined style={{ fontSize: 24, color: '#1a6dff' }} /> },
|
||||
{ key: 'dameng', name: 'Dameng (达梦)', icon: getDbIcon('dameng', undefined, 36) },
|
||||
{ key: 'kingbase', name: 'Kingbase (人大金仓)', icon: getDbIcon('kingbase', undefined, 36) },
|
||||
{ key: 'highgo', name: 'HighGo (瀚高)', icon: getDbIcon('highgo', undefined, 36) },
|
||||
{ key: 'vastbase', name: 'Vastbase (海量)', icon: getDbIcon('vastbase', undefined, 36) },
|
||||
]},
|
||||
{ label: 'NoSQL', items: [
|
||||
{ key: 'mongodb', name: 'MongoDB', icon: <CloudServerOutlined style={{ fontSize: 24, color: '#47A248' }} /> },
|
||||
{ key: 'redis', name: 'Redis', icon: <CloudOutlined style={{ fontSize: 24, color: '#DC382D' }} /> },
|
||||
{ key: 'mongodb', name: 'MongoDB', icon: getDbIcon('mongodb', undefined, 36) },
|
||||
{ key: 'redis', name: 'Redis', icon: getDbIcon('redis', undefined, 36) },
|
||||
]},
|
||||
{ label: '时序数据库', items: [
|
||||
{ key: 'tdengine', name: 'TDengine', icon: <DatabaseOutlined style={{ fontSize: 24, color: '#2F54EB' }} /> },
|
||||
{ key: 'tdengine', name: 'TDengine', icon: getDbIcon('tdengine', undefined, 36) },
|
||||
]},
|
||||
{ label: '其他', items: [
|
||||
{ key: 'custom', name: 'Custom (自定义)', icon: <AppstoreAddOutlined style={{ fontSize: 24, color: '#595959' }} /> },
|
||||
{ key: 'custom', name: 'Custom (自定义)', icon: getDbIcon('custom', undefined, 36) },
|
||||
]},
|
||||
];
|
||||
|
||||
@@ -2512,16 +2521,101 @@ const ConnectionModal: React.FC<{
|
||||
/>
|
||||
)}
|
||||
{(() => {
|
||||
const sectionItems: Array<{ key: 'basic' | 'network'; title: string; description: string; icon: React.ReactNode }> = [
|
||||
const sectionItems: Array<{ key: 'basic' | 'network' | 'appearance'; title: string; description: string; icon: React.ReactNode }> = [
|
||||
{ key: 'basic', title: '基础信息', description: '名称、地址、认证、URI 与数据库范围', icon: <DatabaseOutlined /> },
|
||||
...(!isCustom && !isFileDb ? [{ key: 'network' as const, title: '网络与安全', description: 'SSL、SSH、代理与高级连接', icon: <CloudOutlined /> }] : []),
|
||||
{ key: 'appearance', title: '外观', description: '自定义图标与颜色', icon: <BgColorsOutlined /> },
|
||||
];
|
||||
const resolvedSection = sectionItems.some((item) => item.key === activeConfigSection)
|
||||
? activeConfigSection
|
||||
: sectionItems[0]?.key || 'basic';
|
||||
|
||||
const effectiveIconType = customIconType || dbType;
|
||||
const effectiveIconColor = customIconColor || getDbDefaultColor(effectiveIconType);
|
||||
|
||||
const appearanceSection = (
|
||||
<div style={{ display: 'grid', gap: 18 }}>
|
||||
<div style={{ ...modalInnerSectionStyle, padding: 16 }}>
|
||||
<div style={{ marginBottom: 12, fontSize: 13, fontWeight: 700, color: darkMode ? '#f5f7ff' : '#162033' }}>图标</div>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
|
||||
{DB_ICON_TYPES.map((iconKey) => {
|
||||
const isActive = effectiveIconType === iconKey;
|
||||
return (
|
||||
<button
|
||||
key={iconKey}
|
||||
type="button"
|
||||
title={getDbIconLabel(iconKey)}
|
||||
onClick={() => setCustomIconType(iconKey === dbType ? undefined : iconKey)}
|
||||
style={{
|
||||
width: 44, height: 44, borderRadius: 10,
|
||||
display: 'grid', placeItems: 'center',
|
||||
border: `2px solid ${isActive ? effectiveIconColor : (darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)')}`,
|
||||
background: isActive
|
||||
? (darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(24,144,255,0.06)')
|
||||
: 'transparent',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 120ms ease',
|
||||
}}
|
||||
>
|
||||
{getDbIcon(iconKey, isActive ? effectiveIconColor : undefined, 22)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div style={{ marginTop: 6, fontSize: 11, color: darkMode ? 'rgba(255,255,255,0.45)' : 'rgba(0,0,0,0.35)' }}>
|
||||
当前:{getDbIconLabel(effectiveIconType)}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ ...modalInnerSectionStyle, padding: 16 }}>
|
||||
<div style={{ marginBottom: 12, fontSize: 13, fontWeight: 700, color: darkMode ? '#f5f7ff' : '#162033' }}>颜色</div>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
|
||||
{PRESET_ICON_COLORS.map((presetColor) => {
|
||||
const isActive = effectiveIconColor === presetColor;
|
||||
return (
|
||||
<button
|
||||
key={presetColor}
|
||||
type="button"
|
||||
onClick={() => setCustomIconColor(presetColor === getDbDefaultColor(effectiveIconType) ? undefined : presetColor)}
|
||||
style={{
|
||||
width: 28, height: 28, borderRadius: 8,
|
||||
background: presetColor,
|
||||
border: isActive ? `2.5px solid ${darkMode ? '#fff' : '#162033'}` : '2px solid transparent',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 120ms ease',
|
||||
boxShadow: isActive ? `0 0 0 2px ${presetColor}40` : 'none',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<input
|
||||
type="color"
|
||||
value={effectiveIconColor}
|
||||
onChange={(e) => setCustomIconColor(e.target.value === getDbDefaultColor(effectiveIconType) ? undefined : e.target.value)}
|
||||
title="自定义颜色"
|
||||
style={{ width: 28, height: 28, border: 'none', padding: 0, cursor: 'pointer', borderRadius: 6, background: 'transparent' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ ...modalInnerSectionStyle, padding: 16, display: 'flex', alignItems: 'center', gap: 14 }}>
|
||||
<div style={{ fontSize: 13, fontWeight: 700, color: darkMode ? '#f5f7ff' : '#162033' }}>预览</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
{getDbIcon(effectiveIconType, effectiveIconColor, 24)}
|
||||
<span style={{ fontSize: 14, color: darkMode ? '#e0e0e0' : '#333' }}>{form.getFieldValue('name') || '连接名称'}</span>
|
||||
</div>
|
||||
{(customIconType || customIconColor) && (
|
||||
<Button size="small" type="link" onClick={() => { setCustomIconType(undefined); setCustomIconColor(undefined); }}>
|
||||
重置为默认
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const currentSectionContent = resolvedSection === 'basic'
|
||||
? baseInfoSection
|
||||
: networkSecuritySection;
|
||||
: resolvedSection === 'appearance'
|
||||
? appearanceSection
|
||||
: networkSecuritySection;
|
||||
|
||||
if (sectionItems.length <= 1) {
|
||||
return currentSectionContent;
|
||||
|
||||
@@ -4,7 +4,7 @@ import { TabData, ColumnDefinition } from '../types';
|
||||
import { useStore } from '../store';
|
||||
import { DBQuery, DBGetColumns } from '../../wailsjs/go/app/App';
|
||||
import DataGrid, { GONAVI_ROW_KEY } from './DataGrid';
|
||||
import { buildOrderBySQL, buildPaginatedSelectSQL, buildWhereSQL, quoteIdentPart, quoteQualifiedIdent, withSortBufferTuningSQL, type FilterCondition } from '../utils/sql';
|
||||
import { buildOrderBySQL, buildPaginatedSelectSQL, buildWhereSQL, hasExplicitSort, quoteIdentPart, quoteQualifiedIdent, withSortBufferTuningSQL, type FilterCondition } from '../utils/sql';
|
||||
import { buildMongoCountCommand, buildMongoFilter, buildMongoFindCommand, buildMongoSort } from '../utils/mongodb';
|
||||
import { getDataSourceCapabilities } from '../utils/dataSourceCapabilities';
|
||||
|
||||
@@ -157,7 +157,7 @@ type ViewerFilterSnapshot = {
|
||||
conditions: FilterCondition[];
|
||||
currentPage: number;
|
||||
pageSize: number;
|
||||
sortInfo: { columnKey: string, order: string } | null;
|
||||
sortInfo: Array<{ columnKey: string, order: string, enabled?: boolean }>;
|
||||
scrollTop: number;
|
||||
scrollLeft: number;
|
||||
};
|
||||
@@ -185,16 +185,17 @@ const normalizeViewerFilterConditions = (conditions: FilterCondition[] | undefin
|
||||
const getViewerFilterSnapshot = (tabId: string): ViewerFilterSnapshot => {
|
||||
const cached = viewerFilterSnapshotsByTab.get(String(tabId || '').trim());
|
||||
if (!cached) {
|
||||
return { showFilter: false, conditions: [], currentPage: 1, pageSize: 100, sortInfo: null, scrollTop: 0, scrollLeft: 0 };
|
||||
return { showFilter: false, conditions: [], currentPage: 1, pageSize: 100, sortInfo: [], scrollTop: 0, scrollLeft: 0 };
|
||||
}
|
||||
return {
|
||||
showFilter: cached.showFilter === true,
|
||||
conditions: normalizeViewerFilterConditions(cached.conditions),
|
||||
currentPage: Number.isFinite(Number(cached.currentPage)) && Number(cached.currentPage) > 0 ? Number(cached.currentPage) : 1,
|
||||
pageSize: Number.isFinite(Number(cached.pageSize)) && Number(cached.pageSize) > 0 ? Number(cached.pageSize) : 100,
|
||||
sortInfo: cached.sortInfo && cached.sortInfo.columnKey && (cached.sortInfo.order === 'ascend' || cached.sortInfo.order === 'descend')
|
||||
? { columnKey: String(cached.sortInfo.columnKey), order: cached.sortInfo.order }
|
||||
: null,
|
||||
sortInfo: Array.isArray(cached.sortInfo)
|
||||
? cached.sortInfo.filter(s => s && s.columnKey && (s.order === 'ascend' || s.order === 'descend'))
|
||||
.map(s => ({ columnKey: String(s.columnKey), order: s.order }))
|
||||
: (cached.sortInfo && (cached.sortInfo as any).columnKey ? [{ columnKey: String((cached.sortInfo as any).columnKey), order: (cached.sortInfo as any).order }] : []),
|
||||
scrollTop: Number.isFinite(Number(cached.scrollTop)) ? Number(cached.scrollTop) : 0,
|
||||
scrollLeft: Number.isFinite(Number(cached.scrollLeft)) ? Number(cached.scrollLeft) : 0,
|
||||
};
|
||||
@@ -238,7 +239,7 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
totalCountCancelled: false,
|
||||
});
|
||||
|
||||
const [sortInfo, setSortInfo] = useState<{ columnKey: string, order: string } | null>(initialViewerSnapshot.sortInfo);
|
||||
const [sortInfo, setSortInfo] = useState<Array<{ columnKey: string, order: string, enabled?: boolean }>>(initialViewerSnapshot.sortInfo);
|
||||
|
||||
const [showFilter, setShowFilter] = useState<boolean>(initialViewerSnapshot.showFilter);
|
||||
const [filterConditions, setFilterConditions] = useState<FilterCondition[]>(initialViewerSnapshot.conditions);
|
||||
@@ -511,7 +512,7 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
}
|
||||
};
|
||||
|
||||
const hasSort = !!sortInfo?.columnKey && (sortInfo?.order === 'ascend' || sortInfo?.order === 'descend');
|
||||
const hasSort = hasExplicitSort(sortInfo);
|
||||
const isSortMemoryErr = (msg: string) => /error\s*1038|out of sort memory/i.test(String(msg || ''));
|
||||
let resData = await executeDataQuery(sql, '主查询');
|
||||
|
||||
@@ -788,13 +789,21 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
fetchData(pagination.current, pagination.pageSize);
|
||||
}, [fetchData, pagination.current, pagination.pageSize]);
|
||||
const handleSort = useCallback((field: string, order: string) => {
|
||||
// 支持多字段排序:field 为 JSON 数组字符串时解析为多字段
|
||||
try {
|
||||
const parsed = JSON.parse(field);
|
||||
if (Array.isArray(parsed)) {
|
||||
setSortInfo(parsed.filter((s: any) => s && s.columnKey && (s.order === 'ascend' || s.order === 'descend')));
|
||||
return;
|
||||
}
|
||||
} catch { /* 单字段模式 */ }
|
||||
const normalizedOrder = order === 'ascend' || order === 'descend' ? order : '';
|
||||
const normalizedField = String(field || '').trim();
|
||||
if (!normalizedField || !normalizedOrder) {
|
||||
setSortInfo(null);
|
||||
setSortInfo([]);
|
||||
return;
|
||||
}
|
||||
setSortInfo({ columnKey: normalizedField, order: normalizedOrder });
|
||||
setSortInfo([{ columnKey: normalizedField, order: normalizedOrder, enabled: true }]);
|
||||
}, []);
|
||||
const handlePageChange = useCallback((page: number, size: number) => fetchData(page, size), [fetchData]);
|
||||
const handleToggleFilter = useCallback(() => setShowFilter(prev => !prev), []);
|
||||
@@ -811,8 +820,8 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
let sql = `SELECT * FROM ${quoteQualifiedIdent(dbType, tableName)} ${whereSQL}`;
|
||||
sql += buildOrderBySQL(dbType, sortInfo, pkColumns);
|
||||
const normalizedType = dbType.toLowerCase();
|
||||
const hasExplicitSort = !!sortInfo?.columnKey && (sortInfo?.order === 'ascend' || sortInfo?.order === 'descend');
|
||||
if (hasExplicitSort && (normalizedType === 'mysql' || normalizedType === 'mariadb')) {
|
||||
const hasSortForBuffer = hasExplicitSort(sortInfo);
|
||||
if (hasSortForBuffer && (normalizedType === 'mysql' || normalizedType === 'mariadb')) {
|
||||
sql = withSortBufferTuningSQL(normalizedType, sql, 32 * 1024 * 1024);
|
||||
}
|
||||
return sql;
|
||||
|
||||
217
frontend/src/components/DatabaseIcons.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
import React from 'react';
|
||||
|
||||
// ─── 公共接口 ───────────────────────────────────────────────
|
||||
|
||||
export interface DbIconProps {
|
||||
size?: number;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
// ─── 默认色表 ───────────────────────────────────────────────
|
||||
|
||||
const DB_DEFAULT_COLORS: Record<string, string> = {
|
||||
mysql: '#00758F',
|
||||
mariadb: '#003545',
|
||||
postgres: '#336791',
|
||||
redis: '#DC382D',
|
||||
mongodb: '#47A248',
|
||||
kingbase: '#1890FF',
|
||||
dameng: '#E6002D',
|
||||
oracle: '#F80000',
|
||||
sqlserver: '#CC2927',
|
||||
clickhouse: '#FFBF00',
|
||||
sqlite: '#003B57',
|
||||
duckdb: '#FFC107',
|
||||
vastbase: '#0066CC',
|
||||
highgo: '#00A86B',
|
||||
tdengine: '#2962FF',
|
||||
diros: '#0050B3',
|
||||
sphinx: '#2F5D62',
|
||||
custom: '#888888',
|
||||
};
|
||||
|
||||
export const getDbDefaultColor = (type: string): string =>
|
||||
DB_DEFAULT_COLORS[type?.toLowerCase()] || DB_DEFAULT_COLORS.custom;
|
||||
|
||||
// ─── 有品牌 SVG 文件的数据库类型(文件在 /db-icons/ 下) ────
|
||||
|
||||
const BRAND_SVG_TYPES = new Set([
|
||||
'mysql', 'mariadb', 'postgres', 'redis', 'mongodb', 'clickhouse', 'sqlite',
|
||||
'diros', 'sphinx', 'duckdb',
|
||||
]);
|
||||
|
||||
/** 品牌 SVG 图标:用 <img> 加载 /db-icons/*.svg */
|
||||
const BrandSvgIcon: React.FC<{ type: string; size: number; color?: string }> = ({ type, size, color }) => {
|
||||
const bgColor = color || getDbDefaultColor(type);
|
||||
return (
|
||||
<span style={{
|
||||
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
|
||||
width: size, height: size, borderRadius: size * 0.22,
|
||||
background: '#fff', border: `1.5px solid ${bgColor}`,
|
||||
flexShrink: 0, overflow: 'hidden',
|
||||
}}>
|
||||
<img
|
||||
src={`/db-icons/${type}.svg`}
|
||||
alt={type}
|
||||
width={size * 0.7}
|
||||
height={size * 0.7}
|
||||
style={{ display: 'block' }}
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
// ─── 彩色标签图标(fallback) ──────────────────────────────
|
||||
|
||||
/** 通用彩色标签:填充背景 + 白色粗体缩写 */
|
||||
const ColorBadge: React.FC<{ size: number; color: string; label: string }> = ({ size, color, label }) => {
|
||||
const textSize = label.length <= 2 ? size * 0.48 : size * 0.38;
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1" y="1" width="22" height="22" rx="5" fill={color}/>
|
||||
<text
|
||||
x="12" y="12" dominantBaseline="central" textAnchor="middle"
|
||||
fontSize={textSize} fontWeight="800" fontFamily="system-ui,-apple-system,sans-serif"
|
||||
fill="#fff" letterSpacing={label.length > 2 ? -0.5 : 0}
|
||||
>
|
||||
{label}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
// ─── 各数据库图标 ───────────────────────────────────────────
|
||||
|
||||
// 有品牌 SVG 的数据库
|
||||
const MySQLIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="mysql" size={size} color={color} />
|
||||
);
|
||||
const MariaDBIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="mariadb" size={size} color={color} />
|
||||
);
|
||||
const PostgresIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="postgres" size={size} color={color} />
|
||||
);
|
||||
const RedisIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="redis" size={size} color={color} />
|
||||
);
|
||||
const MongoDBIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="mongodb" size={size} color={color} />
|
||||
);
|
||||
const ClickHouseIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="clickhouse" size={size} color={color} />
|
||||
);
|
||||
const SQLiteIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="sqlite" size={size} color={color} />
|
||||
);
|
||||
|
||||
// 无品牌 SVG → 彩色文字标签
|
||||
const OracleIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.oracle} label="Or" />
|
||||
);
|
||||
const SQLServerIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.sqlserver} label="SS" />
|
||||
);
|
||||
const DorisIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="diros" size={size} color={color} />
|
||||
);
|
||||
const SphinxIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="sphinx" size={size} color={color} />
|
||||
);
|
||||
const DuckDBIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="duckdb" size={size} color={color} />
|
||||
);
|
||||
const KingBaseIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.kingbase} label="KB" />
|
||||
);
|
||||
const DamengIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.dameng} label="DM" />
|
||||
);
|
||||
const VastBaseIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.vastbase} label="VB" />
|
||||
);
|
||||
const HighGoIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.highgo} label="HG" />
|
||||
);
|
||||
const TDengineIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.tdengine} label="TD" />
|
||||
);
|
||||
|
||||
/** Custom — 齿轮图标 */
|
||||
const CustomIcon: React.FC<DbIconProps> = ({ size = 16, color }) => {
|
||||
const c = color || DB_DEFAULT_COLORS.custom;
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1" y="1" width="22" height="22" rx="5" fill={c}/>
|
||||
<circle cx="12" cy="12" r="3.5" stroke="#fff" strokeWidth="1.5" fill="none"/>
|
||||
<path d="M12 4v2.5M12 17.5V20M4 12h2.5M17.5 12H20M6.34 6.34l1.77 1.77M15.89 15.89l1.77 1.77M6.34 17.66l1.77-1.77M15.89 8.11l1.77-1.77" stroke="#fff" strokeWidth="1.3" strokeLinecap="round"/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
// ─── 图标注册表 ─────────────────────────────────────────────
|
||||
|
||||
const DorisIconFallback: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.diros} label="Do" />
|
||||
);
|
||||
const SphinxIconFallback: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.sphinx} label="Sp" />
|
||||
);
|
||||
|
||||
const DB_ICON_MAP: Record<string, React.FC<DbIconProps>> = {
|
||||
mysql: MySQLIcon,
|
||||
mariadb: MariaDBIcon,
|
||||
diros: DorisIcon,
|
||||
sphinx: SphinxIcon,
|
||||
postgres: PostgresIcon,
|
||||
redis: RedisIcon,
|
||||
mongodb: MongoDBIcon,
|
||||
kingbase: KingBaseIcon,
|
||||
dameng: DamengIcon,
|
||||
oracle: OracleIcon,
|
||||
sqlserver: SQLServerIcon,
|
||||
clickhouse: ClickHouseIcon,
|
||||
sqlite: SQLiteIcon,
|
||||
duckdb: DuckDBIcon,
|
||||
vastbase: VastBaseIcon,
|
||||
highgo: HighGoIcon,
|
||||
tdengine: TDengineIcon,
|
||||
custom: CustomIcon,
|
||||
};
|
||||
|
||||
/** 可选图标类型列表(用于图标选择器 UI) */
|
||||
export const DB_ICON_TYPES: string[] = [
|
||||
'mysql', 'mariadb', 'postgres', 'redis', 'mongodb',
|
||||
'oracle', 'sqlserver', 'sqlite', 'duckdb', 'clickhouse',
|
||||
'kingbase', 'dameng', 'vastbase', 'highgo', 'tdengine', 'custom',
|
||||
];
|
||||
|
||||
/** 该类型是否有品牌 SVG 文件 */
|
||||
export const hasBrandSvg = (type: string): boolean => BRAND_SVG_TYPES.has(type?.toLowerCase());
|
||||
|
||||
/** 获取数据库图标 React 节点 */
|
||||
export const getDbIcon = (type: string, color?: string, size?: number): React.ReactNode => {
|
||||
const key = (type || 'custom').toLowerCase();
|
||||
const Component = DB_ICON_MAP[key] || CustomIcon;
|
||||
return <Component size={size} color={color} />;
|
||||
};
|
||||
|
||||
/** 获取数据库图标显示名称(中文) */
|
||||
export const getDbIconLabel = (type: string): string => {
|
||||
const labels: Record<string, string> = {
|
||||
mysql: 'MySQL', mariadb: 'MariaDB', postgres: 'PostgreSQL',
|
||||
redis: 'Redis', mongodb: 'MongoDB', oracle: 'Oracle',
|
||||
sqlserver: 'SQL Server', clickhouse: 'ClickHouse', sqlite: 'SQLite',
|
||||
duckdb: 'DuckDB', kingbase: '金仓', dameng: '达梦',
|
||||
vastbase: 'VastBase', highgo: '瀚高', tdengine: 'TDengine',
|
||||
custom: '自定义',
|
||||
};
|
||||
return labels[type?.toLowerCase()] || type;
|
||||
};
|
||||
|
||||
/** 预设颜色列表 */
|
||||
export const PRESET_ICON_COLORS: string[] = [
|
||||
'#336791', '#00758F', '#DC382D', '#47A248', '#F80000',
|
||||
'#CC2927', '#1890FF', '#E6002D', '#FFBF00', '#2962FF',
|
||||
'#00A86B', '#0066CC', '#FF6B35', '#7C3AED',
|
||||
];
|
||||
462
frontend/src/components/FindInDatabaseModal.tsx
Normal file
@@ -0,0 +1,462 @@
|
||||
import React, { useState, useRef, useCallback, useMemo } from 'react';
|
||||
import { Modal, Input, Button, Table, Progress, Space, Tag, message, Tooltip, Select, Empty } from 'antd';
|
||||
import { SearchOutlined, StopOutlined, EyeOutlined, DatabaseOutlined } from '@ant-design/icons';
|
||||
import { DBQuery, DBGetTables, DBGetAllColumns } from '../../wailsjs/go/app/App';
|
||||
import { quoteIdentPart, escapeLiteral } from '../utils/sql';
|
||||
import { useStore } from '../store';
|
||||
import { buildOverlayWorkbenchTheme } from '../utils/overlayWorkbenchTheme';
|
||||
|
||||
interface FindInDatabaseModalProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
connectionId: string;
|
||||
dbName: string;
|
||||
}
|
||||
|
||||
interface SearchResultItem {
|
||||
tableName: string;
|
||||
matchedColumns: string[];
|
||||
matchCount: number;
|
||||
rows: Record<string, any>[];
|
||||
columns: string[];
|
||||
}
|
||||
|
||||
/** 判断数据库列类型是否为文本类型(只搜索文本字段) */
|
||||
const isTextColumnType = (colType: string): boolean => {
|
||||
const t = (colType || '').toLowerCase().trim();
|
||||
// 显式排除非文本类型
|
||||
if (/^(int|bigint|smallint|tinyint|mediumint|float|double|decimal|numeric|real|money|smallmoney|bit|boolean|bool)/.test(t)) return false;
|
||||
if (/^(date|time|datetime|timestamp|year|interval)/.test(t)) return false;
|
||||
if (/^(blob|binary|varbinary|image|bytea|raw|long raw)/.test(t)) return false;
|
||||
if (/^(geometry|geography|point|line|polygon|spatial)/.test(t)) return false;
|
||||
if (/^(json|jsonb|xml|uuid|uniqueidentifier)/.test(t)) return false;
|
||||
if (/^(serial|bigserial|smallserial|autoincrement|identity)/.test(t)) return false;
|
||||
// 文本类型正匹配
|
||||
if (/^(varchar|char|nvarchar|nchar|text|ntext|tinytext|mediumtext|longtext|string|clob|nclob|character)/.test(t)) return true;
|
||||
if (t === 'sysname' || t === 'sql_variant') return true;
|
||||
// 未知类型默认尝试搜索
|
||||
return true;
|
||||
};
|
||||
|
||||
/** 根据 dbType 构建限制返回行数的 SELECT SQL */
|
||||
const buildLimitedSelectSQL = (dbType: string, baseSql: string, limit: number): string => {
|
||||
const normalizedType = (dbType || '').toLowerCase();
|
||||
switch (normalizedType) {
|
||||
case 'sqlserver':
|
||||
case 'mssql':
|
||||
return baseSql.replace(/^SELECT\b/i, `SELECT TOP ${limit}`);
|
||||
case 'oracle':
|
||||
case 'dameng':
|
||||
return `${baseSql} FETCH FIRST ${limit} ROWS ONLY`;
|
||||
default:
|
||||
return `${baseSql} LIMIT ${limit}`;
|
||||
}
|
||||
};
|
||||
|
||||
const MAX_MATCH_ROWS_PER_TABLE = 100;
|
||||
|
||||
const FindInDatabaseModal: React.FC<FindInDatabaseModalProps> = ({ open, onClose, connectionId, dbName }) => {
|
||||
const [keyword, setKeyword] = useState('');
|
||||
const [matchMode, setMatchMode] = useState<'contains' | 'exact'>('contains');
|
||||
const [searching, setSearching] = useState(false);
|
||||
const [results, setResults] = useState<SearchResultItem[]>([]);
|
||||
const [progress, setProgress] = useState({ current: 0, total: 0, tableName: '' });
|
||||
const [expandedTable, setExpandedTable] = useState<string | null>(null);
|
||||
const cancelledRef = useRef(false);
|
||||
|
||||
const connections = useStore(state => state.connections);
|
||||
const theme = useStore(state => state.theme);
|
||||
|
||||
const conn = useMemo(() => connections.find(c => c.id === connectionId), [connections, connectionId]);
|
||||
const dbType = useMemo(() => (conn?.config?.type || 'mysql').toLowerCase(), [conn]);
|
||||
|
||||
const wt = useMemo(() => {
|
||||
const isDark = theme === 'dark';
|
||||
return buildOverlayWorkbenchTheme(isDark);
|
||||
}, [theme]);
|
||||
|
||||
const buildConfig = useCallback(() => {
|
||||
if (!conn) return null;
|
||||
return {
|
||||
...conn.config,
|
||||
port: Number(conn.config.port),
|
||||
password: conn.config.password || "",
|
||||
database: conn.config.database || "",
|
||||
useSSH: conn.config.useSSH || false,
|
||||
ssh: conn.config.ssh || { host: "", port: 22, user: "", password: "", keyPath: "" }
|
||||
};
|
||||
}, [conn]);
|
||||
|
||||
const handleSearch = useCallback(async () => {
|
||||
const searchKeyword = keyword.trim();
|
||||
if (!searchKeyword) {
|
||||
message.warning('请输入搜索关键字');
|
||||
return;
|
||||
}
|
||||
const config = buildConfig();
|
||||
if (!config) {
|
||||
message.error('未找到连接配置');
|
||||
return;
|
||||
}
|
||||
|
||||
setSearching(true);
|
||||
setResults([]);
|
||||
setExpandedTable(null);
|
||||
cancelledRef.current = false;
|
||||
|
||||
try {
|
||||
// 1. 获取所有表
|
||||
const tablesRes = await DBGetTables(config as any, dbName);
|
||||
if (!tablesRes.success) {
|
||||
message.error('获取表列表失败: ' + tablesRes.message);
|
||||
setSearching(false);
|
||||
return;
|
||||
}
|
||||
const tableRows: any[] = Array.isArray(tablesRes.data) ? tablesRes.data : [];
|
||||
const tableNames = tableRows.map((row: any) => Object.values(row)[0] as string).filter(Boolean);
|
||||
|
||||
if (tableNames.length === 0) {
|
||||
message.info('当前数据库没有表');
|
||||
setSearching(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setProgress({ current: 0, total: tableNames.length, tableName: '' });
|
||||
|
||||
// 2. 获取所有列信息(返回 any[],含 tableName/name/type 字段)
|
||||
const allColsRes = await DBGetAllColumns(config as any, dbName);
|
||||
const allColumns: any[] = (allColsRes?.success && Array.isArray(allColsRes.data)) ? allColsRes.data : [];
|
||||
|
||||
// 按表名分组
|
||||
const columnsByTable: Record<string, Array<{ name: string; type: string }>> = {};
|
||||
allColumns.forEach((col: any) => {
|
||||
const tbl = col.tableName || '';
|
||||
if (!columnsByTable[tbl]) columnsByTable[tbl] = [];
|
||||
columnsByTable[tbl].push({ name: col.name, type: col.type || '' });
|
||||
});
|
||||
|
||||
const searchResults: SearchResultItem[] = [];
|
||||
const escapedKeyword = escapeLiteral(searchKeyword);
|
||||
|
||||
// 3. 逐表搜索
|
||||
for (let i = 0; i < tableNames.length; i++) {
|
||||
if (cancelledRef.current) break;
|
||||
|
||||
const tableName = tableNames[i];
|
||||
setProgress({ current: i + 1, total: tableNames.length, tableName });
|
||||
|
||||
// 获取该表的文本列
|
||||
const tableCols = columnsByTable[tableName] || [];
|
||||
const textCols = tableCols.filter(c => isTextColumnType(c.type));
|
||||
|
||||
if (textCols.length === 0) continue;
|
||||
|
||||
// 构建 WHERE 子句
|
||||
const castType = (dbType === 'sqlserver' || dbType === 'mssql') ? 'NVARCHAR(MAX)' : 'CHAR';
|
||||
const whereConditions = textCols.map(c => {
|
||||
const quotedCol = quoteIdentPart(dbType, c.name);
|
||||
if (matchMode === 'exact') {
|
||||
return `CAST(${quotedCol} AS ${castType}) = '${escapedKeyword}'`;
|
||||
}
|
||||
return `CAST(${quotedCol} AS ${castType}) LIKE '%${escapedKeyword}%'`;
|
||||
});
|
||||
|
||||
const quotedTable = quoteIdentPart(dbType, tableName);
|
||||
const baseSql = `SELECT * FROM ${quotedTable} WHERE ${whereConditions.join(' OR ')}`;
|
||||
const sql = buildLimitedSelectSQL(dbType, baseSql, MAX_MATCH_ROWS_PER_TABLE);
|
||||
|
||||
try {
|
||||
const res = await DBQuery(config as any, dbName, sql);
|
||||
if (res.success && Array.isArray(res.data) && res.data.length > 0) {
|
||||
// 检查哪些列实际匹配了
|
||||
const matchedCols = new Set<string>();
|
||||
const lowerKeyword = searchKeyword.toLowerCase();
|
||||
res.data.forEach((row: any) => {
|
||||
textCols.forEach(c => {
|
||||
const val = row[c.name];
|
||||
if (val != null) {
|
||||
const strVal = String(val).toLowerCase();
|
||||
if (matchMode === 'exact' ? strVal === lowerKeyword : strVal.includes(lowerKeyword)) {
|
||||
matchedCols.add(c.name);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (matchedCols.size > 0) {
|
||||
const columns = Object.keys(res.data[0]);
|
||||
searchResults.push({
|
||||
tableName,
|
||||
matchedColumns: Array.from(matchedCols),
|
||||
matchCount: res.data.length,
|
||||
rows: res.data,
|
||||
columns,
|
||||
});
|
||||
setResults([...searchResults]);
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// 单表查询失败不中断整体搜索
|
||||
}
|
||||
}
|
||||
|
||||
if (!cancelledRef.current) {
|
||||
setResults([...searchResults]);
|
||||
if (searchResults.length === 0) {
|
||||
message.info('未找到匹配的数据');
|
||||
}
|
||||
}
|
||||
} catch (e: any) {
|
||||
message.error('搜索出错: ' + (e?.message || String(e)));
|
||||
} finally {
|
||||
setSearching(false);
|
||||
}
|
||||
}, [keyword, matchMode, dbName, dbType, buildConfig]);
|
||||
|
||||
const handleCancel = useCallback(() => {
|
||||
cancelledRef.current = true;
|
||||
}, []);
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
cancelledRef.current = true;
|
||||
setResults([]);
|
||||
setExpandedTable(null);
|
||||
setProgress({ current: 0, total: 0, tableName: '' });
|
||||
onClose();
|
||||
}, [onClose]);
|
||||
|
||||
// 汇总表的列定义
|
||||
const summaryColumns = useMemo(() => [
|
||||
{
|
||||
title: '表名',
|
||||
dataIndex: 'tableName',
|
||||
key: 'tableName',
|
||||
width: 220,
|
||||
render: (text: string) => (
|
||||
<span style={{ fontWeight: 500, color: wt.titleText }}>
|
||||
<DatabaseOutlined style={{ marginRight: 6, color: wt.iconColor }} />
|
||||
{text}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '匹配列',
|
||||
dataIndex: 'matchedColumns',
|
||||
key: 'matchedColumns',
|
||||
render: (cols: string[]) => (
|
||||
<Space size={4} wrap>
|
||||
{cols.map(col => (
|
||||
<Tag key={col} color="blue" style={{ margin: 0, fontSize: 12 }}>{col}</Tag>
|
||||
))}
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '命中行数',
|
||||
dataIndex: 'matchCount',
|
||||
key: 'matchCount',
|
||||
width: 100,
|
||||
align: 'center' as const,
|
||||
render: (count: number) => (
|
||||
<Tag color={count >= MAX_MATCH_ROWS_PER_TABLE ? 'orange' : 'green'}>
|
||||
{count >= MAX_MATCH_ROWS_PER_TABLE ? `≥${count}` : count}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 80,
|
||||
align: 'center' as const,
|
||||
render: (_: any, record: SearchResultItem) => (
|
||||
<Tooltip title={expandedTable === record.tableName ? '收起详情' : '查看详情'}>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<EyeOutlined />}
|
||||
onClick={(e) => { e.stopPropagation(); setExpandedTable(prev => prev === record.tableName ? null : record.tableName); }}
|
||||
style={{ color: wt.iconColor }}
|
||||
/>
|
||||
</Tooltip>
|
||||
),
|
||||
},
|
||||
], [wt, expandedTable]);
|
||||
|
||||
// 展开的详情行 - 动态列
|
||||
const expandedResult = useMemo(() => {
|
||||
if (!expandedTable) return null;
|
||||
return results.find(r => r.tableName === expandedTable);
|
||||
}, [expandedTable, results]);
|
||||
|
||||
const detailColumns = useMemo(() => {
|
||||
if (!expandedResult) return [];
|
||||
const lowerKeyword = keyword.trim().toLowerCase();
|
||||
return expandedResult.columns.map(col => ({
|
||||
title: col,
|
||||
dataIndex: col,
|
||||
key: col,
|
||||
width: 180,
|
||||
ellipsis: true,
|
||||
render: (value: any) => {
|
||||
const strVal = value != null ? String(value) : '';
|
||||
const isMatch = expandedResult.matchedColumns.includes(col) &&
|
||||
strVal.toLowerCase().includes(lowerKeyword);
|
||||
return (
|
||||
<Tooltip title={strVal} placement="topLeft">
|
||||
<span style={isMatch ? { background: 'rgba(255, 193, 7, 0.3)', padding: '1px 3px', borderRadius: 3 } : undefined}>
|
||||
{strVal || <span style={{ color: wt.mutedText }}>NULL</span>}
|
||||
</span>
|
||||
</Tooltip>
|
||||
);
|
||||
},
|
||||
}));
|
||||
}, [expandedResult, keyword, wt]);
|
||||
|
||||
const percent = progress.total > 0 ? Math.round((progress.current / progress.total) * 100) : 0;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
<span style={{ color: wt.titleText, fontWeight: 600 }}>
|
||||
<SearchOutlined style={{ marginRight: 8, color: wt.iconColor }} />
|
||||
在数据库中搜索 — {dbName}
|
||||
</span>
|
||||
}
|
||||
open={open}
|
||||
onCancel={handleClose}
|
||||
footer={null}
|
||||
width={960}
|
||||
styles={{
|
||||
content: {
|
||||
background: wt.shellBg,
|
||||
borderRadius: 16,
|
||||
border: wt.shellBorder,
|
||||
boxShadow: wt.shellShadow,
|
||||
backdropFilter: wt.shellBackdropFilter,
|
||||
WebkitBackdropFilter: wt.shellBackdropFilter,
|
||||
},
|
||||
header: { background: 'transparent', borderBottom: 'none', paddingBottom: 8 },
|
||||
body: { paddingTop: 8 },
|
||||
}}
|
||||
destroyOnClose
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
{/* 搜索栏 */}
|
||||
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
||||
<Input
|
||||
placeholder="输入要搜索的字符串..."
|
||||
value={keyword}
|
||||
onChange={e => setKeyword(e.target.value)}
|
||||
onPressEnter={!searching ? handleSearch : undefined}
|
||||
style={{ flex: 1 }}
|
||||
disabled={searching}
|
||||
autoFocus
|
||||
/>
|
||||
<Select
|
||||
value={matchMode}
|
||||
onChange={v => setMatchMode(v)}
|
||||
disabled={searching}
|
||||
style={{ width: 110 }}
|
||||
options={[
|
||||
{ label: '包含', value: 'contains' },
|
||||
{ label: '精确匹配', value: 'exact' },
|
||||
]}
|
||||
/>
|
||||
{searching ? (
|
||||
<Button icon={<StopOutlined />} danger onClick={handleCancel}>
|
||||
取消
|
||||
</Button>
|
||||
) : (
|
||||
<Button type="primary" icon={<SearchOutlined />} onClick={handleSearch} disabled={!keyword.trim()}>
|
||||
搜索
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 进度条 */}
|
||||
{searching && (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
<Progress
|
||||
percent={percent}
|
||||
size="small"
|
||||
status="active"
|
||||
strokeColor={wt.iconColor}
|
||||
/>
|
||||
<span style={{ fontSize: 12, color: wt.mutedText }}>
|
||||
正在搜索 {progress.tableName}... ({progress.current}/{progress.total})
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 结果汇总表 */}
|
||||
{results.length > 0 && (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
<div style={{ fontSize: 13, color: wt.mutedText, fontWeight: 500 }}>
|
||||
找到 {results.length} 个表包含匹配数据
|
||||
{searching && '(搜索进行中...)'}
|
||||
</div>
|
||||
<Table
|
||||
dataSource={results}
|
||||
columns={summaryColumns}
|
||||
rowKey="tableName"
|
||||
size="small"
|
||||
pagination={false}
|
||||
style={{ borderRadius: 8, overflow: 'hidden' }}
|
||||
scroll={{ y: expandedTable ? 200 : 400 }}
|
||||
onRow={(record) => ({
|
||||
style: {
|
||||
cursor: 'pointer',
|
||||
background: expandedTable === record.tableName ? wt.hoverBg : undefined,
|
||||
},
|
||||
onClick: () => setExpandedTable(prev => prev === record.tableName ? null : record.tableName),
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 详情展开 */}
|
||||
{expandedResult && (
|
||||
<div style={{
|
||||
border: wt.sectionBorder,
|
||||
borderRadius: 8,
|
||||
background: wt.sectionBg,
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<div style={{
|
||||
padding: '8px 12px',
|
||||
borderBottom: wt.sectionBorder,
|
||||
fontSize: 13,
|
||||
fontWeight: 500,
|
||||
color: wt.titleText,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}}>
|
||||
<span>
|
||||
<DatabaseOutlined style={{ marginRight: 6 }} />
|
||||
{expandedResult.tableName} — 匹配行详情
|
||||
</span>
|
||||
<Tag color="blue">{expandedResult.rows.length} 行</Tag>
|
||||
</div>
|
||||
<Table
|
||||
dataSource={expandedResult.rows.map((row, i) => ({ ...row, __rowIdx: i }))}
|
||||
columns={detailColumns}
|
||||
rowKey="__rowIdx"
|
||||
size="small"
|
||||
pagination={{ pageSize: 20, size: 'small', showSizeChanger: false }}
|
||||
scroll={{ x: Math.max(800, expandedResult.columns.length * 180) }}
|
||||
style={{ fontSize: 12 }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 无结果且搜索完成 */}
|
||||
{!searching && results.length === 0 && progress.total > 0 && (
|
||||
<Empty description="未找到匹配的数据" style={{ margin: '24px 0' }} />
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default FindInDatabaseModal;
|
||||
@@ -20,6 +20,169 @@ const SQL_KEYWORDS = [
|
||||
'COMMENT', 'SHOW', 'DESCRIBE', 'EXPLAIN',
|
||||
];
|
||||
|
||||
// SQL 常用内置函数(通用,适用于 MySQL/PostgreSQL/Oracle/SQL Server 等主流数据源)
|
||||
const SQL_FUNCTIONS: { name: string; detail: string }[] = [
|
||||
// 聚合函数
|
||||
{ name: 'COUNT', detail: '聚合 - 计数' },
|
||||
{ name: 'SUM', detail: '聚合 - 求和' },
|
||||
{ name: 'AVG', detail: '聚合 - 平均值' },
|
||||
{ name: 'MAX', detail: '聚合 - 最大值' },
|
||||
{ name: 'MIN', detail: '聚合 - 最小值' },
|
||||
{ name: 'GROUP_CONCAT', detail: '聚合 - 拼接分组值' },
|
||||
// 字符串函数
|
||||
{ name: 'CONCAT', detail: '字符串 - 拼接' },
|
||||
{ name: 'CONCAT_WS', detail: '字符串 - 带分隔符拼接' },
|
||||
{ name: 'SUBSTRING', detail: '字符串 - 截取子串' },
|
||||
{ name: 'SUBSTR', detail: '字符串 - 截取子串' },
|
||||
{ name: 'LEFT', detail: '字符串 - 从左截取' },
|
||||
{ name: 'RIGHT', detail: '字符串 - 从右截取' },
|
||||
{ name: 'LENGTH', detail: '字符串 - 字节长度' },
|
||||
{ name: 'CHAR_LENGTH', detail: '字符串 - 字符长度' },
|
||||
{ name: 'UPPER', detail: '字符串 - 转大写' },
|
||||
{ name: 'LOWER', detail: '字符串 - 转小写' },
|
||||
{ name: 'TRIM', detail: '字符串 - 去空格' },
|
||||
{ name: 'LTRIM', detail: '字符串 - 去左空格' },
|
||||
{ name: 'RTRIM', detail: '字符串 - 去右空格' },
|
||||
{ name: 'REPLACE', detail: '字符串 - 替换' },
|
||||
{ name: 'REVERSE', detail: '字符串 - 反转' },
|
||||
{ name: 'REPEAT', detail: '字符串 - 重复' },
|
||||
{ name: 'LPAD', detail: '字符串 - 左填充' },
|
||||
{ name: 'RPAD', detail: '字符串 - 右填充' },
|
||||
{ name: 'INSTR', detail: '字符串 - 查找位置' },
|
||||
{ name: 'LOCATE', detail: '字符串 - 查找位置' },
|
||||
{ name: 'FIND_IN_SET', detail: '字符串 - 在集合中查找' },
|
||||
{ name: 'FORMAT', detail: '字符串 - 数字格式化' },
|
||||
{ name: 'SPACE', detail: '字符串 - 生成空格' },
|
||||
{ name: 'INSERT', detail: '字符串 - 插入替换' },
|
||||
{ name: 'FIELD', detail: '字符串 - 返回位置索引' },
|
||||
{ name: 'ELT', detail: '字符串 - 按索引返回' },
|
||||
{ name: 'HEX', detail: '字符串 - 十六进制编码' },
|
||||
{ name: 'UNHEX', detail: '字符串 - 十六进制解码' },
|
||||
// 数学函数
|
||||
{ name: 'ABS', detail: '数学 - 绝对值' },
|
||||
{ name: 'CEIL', detail: '数学 - 向上取整' },
|
||||
{ name: 'CEILING', detail: '数学 - 向上取整' },
|
||||
{ name: 'FLOOR', detail: '数学 - 向下取整' },
|
||||
{ name: 'ROUND', detail: '数学 - 四舍五入' },
|
||||
{ name: 'TRUNCATE', detail: '数学 - 截断小数' },
|
||||
{ name: 'MOD', detail: '数学 - 取模' },
|
||||
{ name: 'RAND', detail: '数学 - 随机数' },
|
||||
{ name: 'SIGN', detail: '数学 - 符号' },
|
||||
{ name: 'POWER', detail: '数学 - 幂运算' },
|
||||
{ name: 'POW', detail: '数学 - 幂运算' },
|
||||
{ name: 'SQRT', detail: '数学 - 平方根' },
|
||||
{ name: 'LOG', detail: '数学 - 对数' },
|
||||
{ name: 'LOG2', detail: '数学 - 以2为底对数' },
|
||||
{ name: 'LOG10', detail: '数学 - 以10为底对数' },
|
||||
{ name: 'LN', detail: '数学 - 自然对数' },
|
||||
{ name: 'EXP', detail: '数学 - e的次方' },
|
||||
{ name: 'PI', detail: '数学 - 圆周率' },
|
||||
{ name: 'GREATEST', detail: '数学 - 返回最大值' },
|
||||
{ name: 'LEAST', detail: '数学 - 返回最小值' },
|
||||
// 日期时间函数
|
||||
{ name: 'NOW', detail: '日期 - 当前日期时间' },
|
||||
{ name: 'CURDATE', detail: '日期 - 当前日期' },
|
||||
{ name: 'CURRENT_DATE', detail: '日期 - 当前日期' },
|
||||
{ name: 'CURTIME', detail: '日期 - 当前时间' },
|
||||
{ name: 'CURRENT_TIME', detail: '日期 - 当前时间' },
|
||||
{ name: 'CURRENT_TIMESTAMP', detail: '日期 - 当前时间戳' },
|
||||
{ name: 'SYSDATE', detail: '日期 - 系统当前时间' },
|
||||
{ name: 'DATE', detail: '日期 - 提取日期部分' },
|
||||
{ name: 'TIME', detail: '日期 - 提取时间部分' },
|
||||
{ name: 'YEAR', detail: '日期 - 提取年份' },
|
||||
{ name: 'MONTH', detail: '日期 - 提取月份' },
|
||||
{ name: 'DAY', detail: '日期 - 提取天' },
|
||||
{ name: 'DAYOFWEEK', detail: '日期 - 星期几(1=周日)' },
|
||||
{ name: 'DAYOFYEAR', detail: '日期 - 年中第几天' },
|
||||
{ name: 'HOUR', detail: '日期 - 提取小时' },
|
||||
{ name: 'MINUTE', detail: '日期 - 提取分钟' },
|
||||
{ name: 'SECOND', detail: '日期 - 提取秒' },
|
||||
{ name: 'DATE_FORMAT', detail: '日期 - 格式化' },
|
||||
{ name: 'DATE_ADD', detail: '日期 - 加日期' },
|
||||
{ name: 'DATE_SUB', detail: '日期 - 减日期' },
|
||||
{ name: 'DATEDIFF', detail: '日期 - 日期差(天)' },
|
||||
{ name: 'TIMEDIFF', detail: '日期 - 时间差' },
|
||||
{ name: 'TIMESTAMPDIFF', detail: '日期 - 时间戳差' },
|
||||
{ name: 'TIMESTAMPADD', detail: '日期 - 时间戳加' },
|
||||
{ name: 'STR_TO_DATE', detail: '日期 - 字符串转日期' },
|
||||
{ name: 'UNIX_TIMESTAMP', detail: '日期 - Unix时间戳' },
|
||||
{ name: 'FROM_UNIXTIME', detail: '日期 - 从Unix时间戳转换' },
|
||||
{ name: 'LAST_DAY', detail: '日期 - 月末日期' },
|
||||
{ name: 'WEEK', detail: '日期 - 第几周' },
|
||||
{ name: 'QUARTER', detail: '日期 - 第几季度' },
|
||||
{ name: 'ADDDATE', detail: '日期 - 加日期' },
|
||||
{ name: 'SUBDATE', detail: '日期 - 减日期' },
|
||||
// 条件/流程控制函数
|
||||
{ name: 'IF', detail: '条件 - 如果' },
|
||||
{ name: 'IFNULL', detail: '条件 - NULL替换' },
|
||||
{ name: 'NULLIF', detail: '条件 - 相等返回NULL' },
|
||||
{ name: 'COALESCE', detail: '条件 - 返回第一个非NULL' },
|
||||
{ name: 'CASE', detail: '条件 - 分支表达式' },
|
||||
// 类型转换
|
||||
{ name: 'CAST', detail: '转换 - 类型转换' },
|
||||
{ name: 'CONVERT', detail: '转换 - 类型/字符集转换' },
|
||||
// JSON 函数
|
||||
{ name: 'JSON_EXTRACT', detail: 'JSON - 提取值' },
|
||||
{ name: 'JSON_UNQUOTE', detail: 'JSON - 去引号' },
|
||||
{ name: 'JSON_SET', detail: 'JSON - 设置值' },
|
||||
{ name: 'JSON_INSERT', detail: 'JSON - 插入值' },
|
||||
{ name: 'JSON_REPLACE', detail: 'JSON - 替换值' },
|
||||
{ name: 'JSON_REMOVE', detail: 'JSON - 删除值' },
|
||||
{ name: 'JSON_CONTAINS', detail: 'JSON - 包含判断' },
|
||||
{ name: 'JSON_OBJECT', detail: 'JSON - 构建对象' },
|
||||
{ name: 'JSON_ARRAY', detail: 'JSON - 构建数组' },
|
||||
{ name: 'JSON_LENGTH', detail: 'JSON - 元素个数' },
|
||||
{ name: 'JSON_TYPE', detail: 'JSON - 值类型' },
|
||||
{ name: 'JSON_VALID', detail: 'JSON - 验证' },
|
||||
{ name: 'JSON_KEYS', detail: 'JSON - 获取键列表' },
|
||||
// 加密/哈希函数
|
||||
{ name: 'MD5', detail: '加密 - MD5哈希' },
|
||||
{ name: 'SHA1', detail: '加密 - SHA1哈希' },
|
||||
{ name: 'SHA2', detail: '加密 - SHA2哈希' },
|
||||
{ name: 'UUID', detail: '工具 - 生成UUID' },
|
||||
// 信息函数
|
||||
{ name: 'DATABASE', detail: '信息 - 当前数据库' },
|
||||
{ name: 'USER', detail: '信息 - 当前用户' },
|
||||
{ name: 'VERSION', detail: '信息 - MySQL版本' },
|
||||
{ name: 'CONNECTION_ID', detail: '信息 - 连接ID' },
|
||||
{ name: 'LAST_INSERT_ID', detail: '信息 - 最后插入ID' },
|
||||
{ name: 'ROW_COUNT', detail: '信息 - 影响行数' },
|
||||
{ name: 'FOUND_ROWS', detail: '信息 - 匹配总行数' },
|
||||
{ name: 'CHARSET', detail: '信息 - 字符集' },
|
||||
{ name: 'COLLATION', detail: '信息 - 排序规则' },
|
||||
// 窗口函数
|
||||
{ name: 'ROW_NUMBER', detail: '窗口 - 行号' },
|
||||
{ name: 'RANK', detail: '窗口 - 排名(有间隔)' },
|
||||
{ name: 'DENSE_RANK', detail: '窗口 - 排名(无间隔)' },
|
||||
{ name: 'NTILE', detail: '窗口 - 分桶' },
|
||||
{ name: 'LAG', detail: '窗口 - 前一行' },
|
||||
{ name: 'LEAD', detail: '窗口 - 后一行' },
|
||||
{ name: 'FIRST_VALUE', detail: '窗口 - 第一个值' },
|
||||
{ name: 'LAST_VALUE', detail: '窗口 - 最后一个值' },
|
||||
{ name: 'NTH_VALUE', detail: '窗口 - 第N个值' },
|
||||
// 其他
|
||||
{ name: 'DISTINCT', detail: '修饰 - 去重' },
|
||||
{ name: 'EXISTS', detail: '修饰 - 存在判断' },
|
||||
{ name: 'BETWEEN', detail: '修饰 - 范围判断' },
|
||||
{ name: 'LIKE', detail: '修饰 - 模式匹配' },
|
||||
{ name: 'REGEXP', detail: '修饰 - 正则匹配' },
|
||||
{ name: 'BENCHMARK', detail: '工具 - 性能测试' },
|
||||
{ name: 'SLEEP', detail: '工具 - 延时' },
|
||||
];
|
||||
|
||||
// 模块级标志:确保 SQL completion provider 全局只注册一次
|
||||
let sqlCompletionRegistered = false;
|
||||
|
||||
// 模块级共享变量:completion provider 从这些变量读取当前活跃 Tab 的状态。
|
||||
// 每个 QueryEditor 实例在成为活跃 Tab 时更新这些变量,确保 provider 始终使用正确的上下文。
|
||||
let sharedCurrentDb = '';
|
||||
let sharedCurrentConnectionId = '';
|
||||
let sharedConnections: any[] = [];
|
||||
let sharedTablesData: {dbName: string, tableName: string}[] = [];
|
||||
let sharedAllColumnsData: {dbName: string, tableName: string, name: string, type: string}[] = [];
|
||||
let sharedVisibleDbs: string[] = [];
|
||||
let sharedColumnsCacheData: Record<string, any[]> = {};
|
||||
|
||||
const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
const [query, setQuery] = useState(tab.query || 'SELECT * FROM ');
|
||||
|
||||
@@ -116,6 +279,19 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
currentDbRef.current = currentDb;
|
||||
}, [currentDb]);
|
||||
|
||||
// 当此 Tab 成为活跃 Tab 时,将本实例的状态同步到模块级共享变量
|
||||
// 确保 completion provider 始终使用当前活跃 Tab 的上下文
|
||||
useEffect(() => {
|
||||
if (activeTabId !== tab.id) return;
|
||||
sharedCurrentDb = currentDb;
|
||||
sharedCurrentConnectionId = currentConnectionId;
|
||||
sharedConnections = connections;
|
||||
sharedTablesData = tablesRef.current;
|
||||
sharedAllColumnsData = allColumnsRef.current;
|
||||
sharedVisibleDbs = visibleDbsRef.current;
|
||||
sharedColumnsCacheData = columnsCacheRef.current;
|
||||
}, [activeTabId, tab.id, currentDb, currentConnectionId, connections]);
|
||||
|
||||
useEffect(() => {
|
||||
connectionsRef.current = connections;
|
||||
}, [connections]);
|
||||
@@ -172,6 +348,9 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
|
||||
// 存储可见数据库列表用于跨库智能提示
|
||||
visibleDbsRef.current = dbs;
|
||||
if (activeTabId === tab.id) {
|
||||
sharedVisibleDbs = dbs;
|
||||
}
|
||||
|
||||
setDbList(dbs);
|
||||
if (!currentDbRef.current) {
|
||||
@@ -180,6 +359,9 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
}
|
||||
} else {
|
||||
visibleDbsRef.current = [];
|
||||
if (activeTabId === tab.id) {
|
||||
sharedVisibleDbs = [];
|
||||
}
|
||||
setDbList([]);
|
||||
}
|
||||
};
|
||||
@@ -234,6 +416,11 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
|
||||
tablesRef.current = allTables;
|
||||
allColumnsRef.current = allColumns;
|
||||
// 如果当前 Tab 是活跃 Tab,同步更新共享变量
|
||||
if (activeTabId === tab.id) {
|
||||
sharedTablesData = allTables;
|
||||
sharedAllColumnsData = allColumns;
|
||||
}
|
||||
};
|
||||
void fetchMetadata();
|
||||
}, [currentConnectionId, connections, dbList]); // dbList 变化时触发重新加载
|
||||
@@ -278,6 +465,9 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
// 应用透明主题(主题已在 main.tsx 全局注册)
|
||||
monaco.editor.setTheme(darkMode ? 'transparent-dark' : 'transparent-light');
|
||||
|
||||
// 全局只注册一次 SQL completion provider,避免多 tab 重复注册导致补全项重复
|
||||
if (!sqlCompletionRegistered) {
|
||||
sqlCompletionRegistered = true;
|
||||
monaco.languages.registerCompletionItemProvider('sql', {
|
||||
triggerCharacters: ['.'],
|
||||
provideCompletionItems: async (model: any, position: any) => {
|
||||
@@ -331,8 +521,8 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
};
|
||||
|
||||
const buildConnConfig = () => {
|
||||
const connId = currentConnectionIdRef.current;
|
||||
const conn = connectionsRef.current.find(c => c.id === connId);
|
||||
const connId = sharedCurrentConnectionId;
|
||||
const conn = sharedConnections.find(c => c.id === connId);
|
||||
if (!conn) return null;
|
||||
return {
|
||||
...conn.config,
|
||||
@@ -345,11 +535,11 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
};
|
||||
|
||||
const getColumnsByDB = async (tableIdent: string) => {
|
||||
const connId = currentConnectionIdRef.current;
|
||||
const dbName = currentDbRef.current;
|
||||
const connId = sharedCurrentConnectionId;
|
||||
const dbName = sharedCurrentDb;
|
||||
if (!connId || !dbName) return [] as ColumnDefinition[];
|
||||
const key = `${connId}|${dbName}|${tableIdent}`;
|
||||
const cached = columnsCacheRef.current[key];
|
||||
const cached = sharedColumnsCacheData[key];
|
||||
if (cached) return cached;
|
||||
|
||||
const config = buildConnConfig();
|
||||
@@ -358,7 +548,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
const res = await DBGetColumns(config as any, dbName, tableIdent);
|
||||
if (res?.success && Array.isArray(res.data)) {
|
||||
const cols = res.data as ColumnDefinition[];
|
||||
columnsCacheRef.current[key] = cols;
|
||||
sharedColumnsCacheData[key] = cols;
|
||||
return cols;
|
||||
}
|
||||
return [] as ColumnDefinition[];
|
||||
@@ -377,7 +567,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
const colPrefix = (threePartMatch[3] || '').toLowerCase();
|
||||
|
||||
// 在 allColumnsRef 中查找匹配的列
|
||||
const cols = allColumnsRef.current.filter(c =>
|
||||
const cols = sharedAllColumnsData.filter(c =>
|
||||
(c.dbName || '').toLowerCase() === dbPart.toLowerCase() &&
|
||||
(c.tableName || '').toLowerCase() === tablePart.toLowerCase()
|
||||
);
|
||||
@@ -405,10 +595,10 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
const qualifierLower = qualifier.toLowerCase();
|
||||
|
||||
// 首先检查 qualifier 是否是数据库名(跨库表提示)
|
||||
const visibleDbs = visibleDbsRef.current;
|
||||
const visibleDbs = sharedVisibleDbs;
|
||||
if (visibleDbs.some(db => db.toLowerCase() === qualifierLower)) {
|
||||
// qualifier 是数据库名,提示该库的表
|
||||
const tables = tablesRef.current.filter(t =>
|
||||
const tables = sharedTablesData.filter(t =>
|
||||
(t.dbName || '').toLowerCase() === qualifierLower
|
||||
);
|
||||
const filtered = prefix
|
||||
@@ -427,7 +617,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
}
|
||||
|
||||
// qualifier 是 schema(如 dbo/public)时,仅补全表名,避免输入 dbo. 后再补成 dbo.dbo.table
|
||||
const schemaTables = tablesRef.current
|
||||
const schemaTables = sharedTablesData
|
||||
.map(t => {
|
||||
const parsed = splitSchemaAndTable(t.tableName || '');
|
||||
return {
|
||||
@@ -471,7 +661,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
|
||||
// 解析 db.table 或 table 格式
|
||||
const parts = tableIdent.split('.');
|
||||
let dbName = currentDbRef.current || '';
|
||||
let dbName = sharedCurrentDb || '';
|
||||
let tableName = tableIdent;
|
||||
if (parts.length === 2) {
|
||||
dbName = parts[0];
|
||||
@@ -493,8 +683,8 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
if (tableInfo) {
|
||||
// Prefer preloaded MySQL all-columns cache
|
||||
let cols: { name: string, type?: string, tableName?: string, dbName?: string }[];
|
||||
if (allColumnsRef.current.length > 0) {
|
||||
cols = allColumnsRef.current
|
||||
if (sharedAllColumnsData.length > 0) {
|
||||
cols = sharedAllColumnsData
|
||||
.filter(c =>
|
||||
(c.dbName || '').toLowerCase() === (tableInfo.dbName || '').toLowerCase() &&
|
||||
(c.tableName || '').toLowerCase() === (tableInfo.tableName || '').toLowerCase()
|
||||
@@ -532,7 +722,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
foundTables.add(t.toLowerCase());
|
||||
}
|
||||
|
||||
const currentDatabase = currentDbRef.current || '';
|
||||
const currentDatabase = sharedCurrentDb || '';
|
||||
const wordPrefix = (word.word || '').toLowerCase();
|
||||
const startsWithPrefix = (candidate: string) => !wordPrefix || candidate.toLowerCase().startsWith(wordPrefix);
|
||||
const expectsTableName = /\b(?:FROM|JOIN|UPDATE|INTO|DELETE\s+FROM|TABLE|DESCRIBE|DESC|EXPLAIN)\s+[`"]?[\w.]*$/i.test(linePrefix.trim());
|
||||
@@ -540,14 +730,14 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
&& wordPrefix.length > 0
|
||||
&& SQL_KEYWORDS.some((keyword) => keyword.toLowerCase().startsWith(wordPrefix));
|
||||
const sortGroups = shouldBoostKeywords
|
||||
? { keyword: '00', columnCurrent: '10', columnOther: '11', tableCurrent: '20', tableOther: '21', db: '30' }
|
||||
? { keyword: '00', func: '05', columnCurrent: '10', columnOther: '11', tableCurrent: '20', tableOther: '21', db: '30' }
|
||||
: expectsTableName
|
||||
? { keyword: '20', columnCurrent: '10', columnOther: '11', tableCurrent: '00', tableOther: '01', db: '30' }
|
||||
: { keyword: '30', columnCurrent: '00', columnOther: '01', tableCurrent: '10', tableOther: '11', db: '20' };
|
||||
? { keyword: '20', func: '25', columnCurrent: '10', columnOther: '11', tableCurrent: '00', tableOther: '01', db: '30' }
|
||||
: { keyword: '30', func: '25', columnCurrent: '00', columnOther: '01', tableCurrent: '10', tableOther: '11', db: '20' };
|
||||
|
||||
// 相关列提示:匹配 SQL 中引用的表(FROM/JOIN 等)
|
||||
// 权重最高,输入 WHERE 条件时优先显示
|
||||
const relevantColumns = allColumnsRef.current
|
||||
const relevantColumns = sharedAllColumnsData
|
||||
.filter(c => {
|
||||
const fullIdent = `${c.dbName}.${c.tableName}`.toLowerCase();
|
||||
const shortIdent = (c.tableName || '').toLowerCase();
|
||||
@@ -567,7 +757,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
});
|
||||
|
||||
// 表提示:当前库显示表名,其他库显示 db.table 格式
|
||||
const tableSuggestions = tablesRef.current
|
||||
const tableSuggestions = sharedTablesData
|
||||
.filter(t => {
|
||||
const isCurrentDb = (t.dbName || '').toLowerCase() === currentDatabase.toLowerCase();
|
||||
const label = isCurrentDb ? t.tableName : `${t.dbName}.${t.tableName}`;
|
||||
@@ -588,7 +778,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
});
|
||||
|
||||
// 数据库提示
|
||||
const dbSuggestions = visibleDbsRef.current
|
||||
const dbSuggestions = sharedVisibleDbs
|
||||
.filter((db) => startsWithPrefix(db))
|
||||
.map(db => ({
|
||||
label: db,
|
||||
@@ -610,15 +800,30 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
sortText: sortGroups.keyword + k,
|
||||
}));
|
||||
|
||||
// 内置函数提示
|
||||
const funcSuggestions = SQL_FUNCTIONS
|
||||
.filter((f) => startsWithPrefix(f.name))
|
||||
.map(f => ({
|
||||
label: f.name,
|
||||
kind: monaco.languages.CompletionItemKind.Function,
|
||||
insertText: f.name + '($0)',
|
||||
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
|
||||
detail: f.detail,
|
||||
range,
|
||||
sortText: sortGroups.func + f.name,
|
||||
}));
|
||||
|
||||
const suggestions = [
|
||||
...relevantColumns, // FROM 表的列最优先
|
||||
...tableSuggestions, // 表次之
|
||||
...dbSuggestions, // 数据库
|
||||
...funcSuggestions, // 内置函数
|
||||
...keywordSuggestions // 关键字最后
|
||||
];
|
||||
return { suggestions };
|
||||
}
|
||||
});
|
||||
} // end sqlCompletionRegistered guard
|
||||
};
|
||||
|
||||
const handleFormat = () => {
|
||||
@@ -776,9 +981,6 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
return statements;
|
||||
};
|
||||
|
||||
// DEBT: 改用 DBQueryMulti 后前端不再逐条处理语句,此函数暂时未使用。
|
||||
// 当恢复前端自动行数限制功能时需要启用。
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const getLeadingKeyword = (sql: string): string => {
|
||||
const text = (sql || '').replace(/\r\n/g, '\n');
|
||||
const isWS = (ch: string) => ch === ' ' || ch === '\t' || ch === '\n' || ch === '\r';
|
||||
@@ -1071,24 +1273,53 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
return -1;
|
||||
};
|
||||
|
||||
// DEBT: 改用 DBQueryMulti 后前端不再逐条处理语句,此函数暂时未使用。
|
||||
// 当恢复前端自动行数限制功能时需要启用。
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const applyAutoLimit = (sql: string, dbType: string, maxRows: number): { sql: string; applied: boolean; maxRows: number } => {
|
||||
const normalizedType = (dbType || 'mysql').toLowerCase();
|
||||
const supportsLimit = normalizedType === 'mysql' || normalizedType === 'mariadb' || normalizedType === 'diros' || normalizedType === 'sphinx' || normalizedType === 'postgres' || normalizedType === 'kingbase' || normalizedType === 'sqlite' || normalizedType === 'duckdb' || normalizedType === 'tdengine' || normalizedType === 'clickhouse' || normalizedType === '';
|
||||
if (!supportsLimit) return { sql, applied: false, maxRows };
|
||||
if (!Number.isFinite(maxRows) || maxRows <= 0) return { sql, applied: false, maxRows };
|
||||
const normalizedType = (dbType || 'mysql').toLowerCase();
|
||||
|
||||
// 只对 SELECT 语句自动加限制
|
||||
const keyword = getLeadingKeyword(sql);
|
||||
if (keyword !== 'SELECT') return { sql, applied: false, maxRows };
|
||||
|
||||
const { main, tail } = splitSqlTail(sql);
|
||||
if (!main.trim()) return { sql, applied: false, maxRows };
|
||||
|
||||
const fromPos = findTopLevelKeyword(main, 'from');
|
||||
const limitPos = findTopLevelKeyword(main, 'limit');
|
||||
// 已有 LIMIT → 不注入
|
||||
if (limitPos >= 0 && (fromPos < 0 || limitPos > fromPos)) return { sql, applied: false, maxRows };
|
||||
const fetchPos = findTopLevelKeyword(main, 'fetch');
|
||||
// 已有 FETCH → 不注入
|
||||
if (fetchPos >= 0 && (fromPos < 0 || fetchPos > fromPos)) return { sql, applied: false, maxRows };
|
||||
|
||||
// SQL Server / mssql: 检查是否已有 TOP,未有则注入 SELECT TOP N
|
||||
if (normalizedType === 'sqlserver' || normalizedType === 'mssql') {
|
||||
const topPos = findTopLevelKeyword(main, 'top');
|
||||
if (topPos >= 0) return { sql, applied: false, maxRows }; // 已有 TOP
|
||||
// 在 SELECT 关键字之后插入 TOP N
|
||||
const selectPos = findTopLevelKeyword(main, 'select');
|
||||
if (selectPos < 0) return { sql, applied: false, maxRows };
|
||||
const afterSelect = selectPos + 'SELECT'.length;
|
||||
// 处理 SELECT DISTINCT 的情况
|
||||
const restAfterSelect = main.slice(afterSelect);
|
||||
const distinctMatch = restAfterSelect.match(/^(\s+DISTINCT\b)/i);
|
||||
const insertOffset = distinctMatch ? afterSelect + distinctMatch[1].length : afterSelect;
|
||||
const nextMain = main.slice(0, insertOffset) + ` TOP ${maxRows}` + main.slice(insertOffset);
|
||||
return { sql: nextMain + tail, applied: true, maxRows };
|
||||
}
|
||||
|
||||
// Oracle / Dameng: 使用 FETCH FIRST N ROWS ONLY(Oracle 12c+ 标准语法)
|
||||
if (normalizedType === 'oracle' || normalizedType === 'dameng') {
|
||||
// 检查是否已有 ROWNUM 限制
|
||||
const rownumPos = findTopLevelKeyword(main, 'rownum');
|
||||
if (rownumPos >= 0) return { sql, applied: false, maxRows };
|
||||
const offsetPos = findTopLevelKeyword(main, 'offset');
|
||||
if (offsetPos >= 0 && (fromPos < 0 || offsetPos > fromPos)) return { sql, applied: false, maxRows };
|
||||
const nextMain = main.trimEnd() + ` FETCH FIRST ${maxRows} ROWS ONLY`;
|
||||
return { sql: nextMain + tail, applied: true, maxRows };
|
||||
}
|
||||
|
||||
// 通用 LIMIT 语法(MySQL, PostgreSQL, SQLite, ClickHouse, DuckDB 等)
|
||||
const offsetPos = findTopLevelKeyword(main, 'offset');
|
||||
const forPos = findTopLevelKeyword(main, 'for');
|
||||
const lockPos = findTopLevelKeyword(main, 'lock');
|
||||
@@ -1116,6 +1347,72 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
return selected;
|
||||
};
|
||||
|
||||
// 精准重查询单个结果集(提交事务 / 刷新按钮使用),不会重跑整个编辑器 SQL
|
||||
const handleReloadResult = async (resultKey: string, sql: string) => {
|
||||
if (!sql?.trim() || !currentDb) return;
|
||||
const conn = connections.find(c => c.id === currentConnectionId);
|
||||
if (!conn) return;
|
||||
|
||||
const config = {
|
||||
...conn.config,
|
||||
port: Number(conn.config.port),
|
||||
password: conn.config.password || "",
|
||||
database: conn.config.database || "",
|
||||
useSSH: conn.config.useSSH || false,
|
||||
ssh: conn.config.ssh || { host: "", port: 22, user: "", password: "", keyPath: "" }
|
||||
};
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
// 使用 DBQueryMulti 保持和首次查询一致的后端路径
|
||||
let queryId: string;
|
||||
try {
|
||||
queryId = await GenerateQueryID();
|
||||
} catch {
|
||||
queryId = 'reload-' + Date.now();
|
||||
}
|
||||
const res = await DBQueryMulti(config as any, currentDb, sql, queryId);
|
||||
if (!res?.success) {
|
||||
message.error('刷新失败: ' + (res?.message || '未知错误'));
|
||||
return;
|
||||
}
|
||||
|
||||
// 取第一个结果集(单条 SQL 只有一个结果集)
|
||||
const resultSetDataArray = Array.isArray(res.data) ? (res.data as any[]) : [];
|
||||
if (resultSetDataArray.length === 0) return;
|
||||
const rsData = resultSetDataArray[0];
|
||||
const isAffectedResult = Array.isArray(rsData.rows) && rsData.rows.length === 1
|
||||
&& rsData.columns && rsData.columns.length === 1
|
||||
&& rsData.columns[0] === 'affectedRows';
|
||||
if (isAffectedResult) return; // 不应该出现,但保险起见
|
||||
|
||||
let rows = Array.isArray(rsData.rows) ? rsData.rows : [];
|
||||
const maxRows = Number(queryOptions?.maxRows) || 0;
|
||||
let truncated = false;
|
||||
if (Number.isFinite(maxRows) && maxRows > 0 && rows.length > maxRows) {
|
||||
truncated = true;
|
||||
rows = rows.slice(0, maxRows);
|
||||
}
|
||||
const cols = (rsData.columns && rsData.columns.length > 0)
|
||||
? rsData.columns
|
||||
: (rows.length > 0 ? Object.keys(rows[0]) : []);
|
||||
rows.forEach((row: any, i: number) => {
|
||||
if (row && typeof row === 'object') row[GONAVI_ROW_KEY] = i;
|
||||
});
|
||||
|
||||
// 只更新匹配的结果集的 rows 和 columns,保留 tableName/pkColumns/readOnly 等元数据
|
||||
setResultSets(prev => prev.map(rs =>
|
||||
rs.key === resultKey
|
||||
? { ...rs, rows, columns: cols, truncated }
|
||||
: rs
|
||||
));
|
||||
} catch (err: any) {
|
||||
message.error('刷新失败: ' + (err?.message || '未知错误'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRun = async () => {
|
||||
const currentQuery = getCurrentQuery();
|
||||
if (!currentQuery.trim()) return;
|
||||
@@ -1278,12 +1575,10 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
} else if (nextResultSets.length === 0) {
|
||||
message.success('执行成功。');
|
||||
}
|
||||
if (anyTruncated && maxRows > 0) {
|
||||
message.warning(`结果集已自动限制为最多 ${maxRows} 行(可在工具栏调整)。`);
|
||||
}
|
||||
|
||||
} else {
|
||||
// 非 MongoDB:使用 DBQueryMulti 一次性执行多条 SQL,后端返回多结果集
|
||||
const fullSQL = normalizedRawSQL;
|
||||
let fullSQL = normalizedRawSQL;
|
||||
if (!fullSQL.trim()) {
|
||||
message.info('没有可执行的 SQL。');
|
||||
setResultSets([]);
|
||||
@@ -1291,6 +1586,19 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
return;
|
||||
}
|
||||
|
||||
// 自动给 SELECT 语句注入行数限制(防止大结果集卡死)
|
||||
const maxRowsForLimit = Number(queryOptions?.maxRows) || 0;
|
||||
let anyLimitApplied = false;
|
||||
if (Number.isFinite(maxRowsForLimit) && maxRowsForLimit > 0) {
|
||||
const stmts = splitSQLStatements(fullSQL);
|
||||
const limitedStmts = stmts.map(s => {
|
||||
const result = applyAutoLimit(s, normalizedDbType, maxRowsForLimit);
|
||||
if (result.applied) anyLimitApplied = true;
|
||||
return result.sql;
|
||||
});
|
||||
fullSQL = limitedStmts.join(';\n');
|
||||
}
|
||||
|
||||
const startTime = Date.now();
|
||||
let queryId: string;
|
||||
try {
|
||||
@@ -1378,7 +1686,8 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
} else {
|
||||
let rows = Array.isArray(rsData.rows) ? rsData.rows : [];
|
||||
let truncated = false;
|
||||
if (Number.isFinite(maxRows) && maxRows > 0 && rows.length > maxRows) {
|
||||
// 仅当前端自动注入了 LIMIT 时才做兜底截断;用户手写 LIMIT 时尊重原始结果
|
||||
if (anyLimitApplied && Number.isFinite(maxRows) && maxRows > 0 && rows.length > maxRows) {
|
||||
truncated = true;
|
||||
anyTruncated = true;
|
||||
rows = rows.slice(0, maxRows);
|
||||
@@ -1393,7 +1702,8 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
|
||||
let simpleTableName: string | undefined = undefined;
|
||||
if (rawStatement) {
|
||||
const tableMatch = rawStatement.match(/^\s*SELECT\s+\*\s+FROM\s+[`"]?(\w+)[`"]?\s*(?:WHERE.*)?(?:ORDER BY.*)?(?:LIMIT.*)?$/i);
|
||||
// 支持多行 SQL:SELECT * FROM [schema.]table [WHERE...] [ORDER BY...] [LIMIT...] 等
|
||||
const tableMatch = rawStatement.match(/^\s*SELECT\s+\*\s+FROM\s+(?:[\w`"]+\.)?[`"]?(\w+)[`"]?\s*(?:$|[\s;])/im);
|
||||
if (tableMatch) {
|
||||
simpleTableName = tableMatch[1];
|
||||
if (!forceReadOnlyResult) {
|
||||
@@ -1446,9 +1756,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
} else if (nextResultSets.length === 0) {
|
||||
message.success('执行成功。');
|
||||
}
|
||||
if (anyTruncated && maxRows > 0) {
|
||||
message.warning(`结果集已自动限制为最多 ${maxRows} 行(可在工具栏调整)。`);
|
||||
}
|
||||
|
||||
}
|
||||
} catch (e: any) {
|
||||
message.error("Error executing query: " + e.message);
|
||||
@@ -1804,7 +2112,11 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
label: (
|
||||
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
|
||||
<Tooltip title={rs.sql}>
|
||||
<span>{`结果 ${idx + 1}${Array.isArray(rs.rows) ? ` (${rs.rows.length}${rs.truncated ? '+' : ''})` : ''}`}</span>
|
||||
<span>{(() => {
|
||||
const isAffected = rs.columns.length === 1 && rs.columns[0] === 'affectedRows';
|
||||
if (isAffected) return `结果 ${idx + 1} ✓`;
|
||||
return `结果 ${idx + 1}${Array.isArray(rs.rows) ? ` (${rs.rows.length})` : ''}`;
|
||||
})()}</span>
|
||||
</Tooltip>
|
||||
<Tooltip title="关闭结果">
|
||||
<span
|
||||
@@ -1820,23 +2132,40 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
</Tooltip>
|
||||
</div>
|
||||
),
|
||||
children: (
|
||||
<div style={{ flex: 1, minHeight: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
|
||||
<DataGrid
|
||||
data={rs.rows}
|
||||
columnNames={rs.columns}
|
||||
loading={loading}
|
||||
tableName={rs.tableName}
|
||||
exportScope="queryResult"
|
||||
resultSql={rs.exportSql || rs.sql}
|
||||
dbName={currentDb}
|
||||
connectionId={currentConnectionId}
|
||||
pkColumns={rs.pkColumns}
|
||||
onReload={handleRun}
|
||||
readOnly={rs.readOnly}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
children: (() => {
|
||||
// affectedRows 类型结果集(UPDATE/INSERT/DELETE):简洁提示
|
||||
const isAffectedResult = rs.columns.length === 1 && rs.columns[0] === 'affectedRows';
|
||||
if (isAffectedResult) {
|
||||
const affected = Number(rs.rows[0]?.affectedRows ?? 0);
|
||||
return (
|
||||
<div style={{
|
||||
flex: 1, minHeight: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
flexDirection: 'column', gap: 8, color: '#666', userSelect: 'text',
|
||||
}}>
|
||||
<span style={{ fontSize: 36, color: '#52c41a' }}>✓</span>
|
||||
<span style={{ fontSize: 14, fontWeight: 500 }}>执行成功</span>
|
||||
<span style={{ fontSize: 13, color: '#999' }}>影响行数:{affected}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div style={{ flex: 1, minHeight: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
|
||||
<DataGrid
|
||||
data={rs.rows}
|
||||
columnNames={rs.columns}
|
||||
loading={loading}
|
||||
tableName={rs.tableName}
|
||||
exportScope="queryResult"
|
||||
resultSql={rs.exportSql || rs.sql}
|
||||
dbName={currentDb}
|
||||
connectionId={currentConnectionId}
|
||||
pkColumns={rs.pkColumns}
|
||||
onReload={() => handleReloadResult(rs.key, rs.sql)}
|
||||
readOnly={rs.readOnly}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})()
|
||||
}))}
|
||||
/>
|
||||
) : (
|
||||
|
||||
@@ -35,9 +35,11 @@ import { Tree, message, Dropdown, MenuProps, Input, Button, Modal, Form, Badge,
|
||||
import { useStore } from '../store';
|
||||
import { buildOverlayWorkbenchTheme } from '../utils/overlayWorkbenchTheme';
|
||||
import { SavedConnection } from '../types';
|
||||
import { getDbIcon } from './DatabaseIcons';
|
||||
import { DBGetDatabases, DBGetTables, DBQuery, DBShowCreateTable, ExportTable, OpenSQLFile, ExecuteSQLFile, CancelSQLFileExecution, CreateDatabase, RenameDatabase, DropDatabase, RenameTable, DropTable, DropView, DropFunction, RenameView } from '../../wailsjs/go/app/App';
|
||||
import { EventsOn } from '../../wailsjs/runtime/runtime';
|
||||
import { normalizeOpacityForPlatform, resolveAppearanceValues } from '../utils/appearance';
|
||||
import FindInDatabaseModal from './FindInDatabaseModal';
|
||||
|
||||
const { Search } = Input;
|
||||
|
||||
@@ -282,6 +284,9 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
|
||||
const [batchConnContext, setBatchConnContext] = useState<any>(null);
|
||||
const [selectedDbConnection, setSelectedDbConnection] = useState<string>('');
|
||||
|
||||
// Find in Database Modal
|
||||
const [findInDbContext, setFindInDbContext] = useState<{ open: boolean; connectionId: string; dbName: string }>({ open: false, connectionId: '', dbName: '' });
|
||||
|
||||
useEffect(() => {
|
||||
// Refresh queries for expanded databases
|
||||
const findNode = (nodes: TreeNode[], k: React.Key): TreeNode | null => {
|
||||
@@ -325,7 +330,7 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
|
||||
return {
|
||||
title: conn.name,
|
||||
key: conn.id,
|
||||
icon: conn.config.type === 'redis' ? <CloudOutlined style={{ color: '#DC382D' }} /> : <HddOutlined />,
|
||||
icon: getDbIcon(conn.iconType || conn.config.type, conn.iconColor, 22),
|
||||
type: 'connection',
|
||||
dataRef: conn,
|
||||
isLeaf: false,
|
||||
@@ -1450,6 +1455,18 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
|
||||
};
|
||||
|
||||
const onDoubleClick = (e: any, node: any) => {
|
||||
if (node.type === 'object-group' && node.dataRef?.groupKey === 'tables') {
|
||||
const { id, dbName, schemaName } = node.dataRef;
|
||||
addTab({
|
||||
id: `table-overview-${id}-${dbName}${schemaName ? `-${schemaName}` : ''}`,
|
||||
title: `表概览 - ${dbName}${schemaName ? ` (${schemaName})` : ''}`,
|
||||
type: 'table-overview' as any,
|
||||
connectionId: id,
|
||||
dbName,
|
||||
schemaName,
|
||||
} as any);
|
||||
return;
|
||||
}
|
||||
if (node.type === 'table') {
|
||||
const { tableName, dbName, id } = node.dataRef;
|
||||
// 记录表访问
|
||||
@@ -2189,7 +2206,7 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
|
||||
...conn.config,
|
||||
port: Number(conn.config.port),
|
||||
password: conn.config.password || "",
|
||||
database: "", // No db selected
|
||||
database: (conn.config.type === 'oracle' || conn.config.type === 'dameng') ? (conn.config.database || "") : "",
|
||||
useSSH: conn.config.useSSH || false,
|
||||
ssh: conn.config.ssh || { host: "", port: 22, user: "", password: "", keyPath: "" }
|
||||
};
|
||||
@@ -3587,7 +3604,7 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
|
||||
}
|
||||
|
||||
const statusBadge = node.type === 'connection' || node.type === 'database' ? (
|
||||
<Badge status={status} style={{ marginRight: 8 }} />
|
||||
<Badge status={status} style={{ marginLeft: 4, marginRight: 8 }} />
|
||||
) : null;
|
||||
|
||||
const displayTitle = String(node.title ?? '');
|
||||
@@ -4312,6 +4329,12 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
<FindInDatabaseModal
|
||||
open={findInDbContext.open}
|
||||
onClose={() => setFindInDbContext({ open: false, connectionId: '', dbName: '' })}
|
||||
connectionId={findInDbContext.connectionId}
|
||||
dbName={findInDbContext.dbName}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -14,6 +14,7 @@ import RedisViewer from './RedisViewer';
|
||||
import RedisCommandEditor from './RedisCommandEditor';
|
||||
import TriggerViewer from './TriggerViewer';
|
||||
import DefinitionViewer from './DefinitionViewer';
|
||||
import TableOverview from './TableOverview';
|
||||
import type { TabData } from '../types';
|
||||
|
||||
const detectConnectionEnvLabel = (connectionName: string): string | null => {
|
||||
@@ -28,7 +29,7 @@ const detectConnectionEnvLabel = (connectionName: string): string | null => {
|
||||
};
|
||||
|
||||
const buildTabDisplayTitle = (tab: TabData, connectionName: string | undefined): string => {
|
||||
if (tab.type !== 'table' && tab.type !== 'design') return tab.title;
|
||||
if (tab.type !== 'table' && tab.type !== 'design' && tab.type !== 'table-overview') return tab.title;
|
||||
if (!connectionName) return tab.title;
|
||||
const prefix = detectConnectionEnvLabel(connectionName) || connectionName;
|
||||
return `[${prefix}] ${tab.title}`;
|
||||
@@ -159,6 +160,8 @@ const TabManager: React.FC = () => {
|
||||
content = <TriggerViewer tab={tab} />;
|
||||
} else if (tab.type === 'view-def' || tab.type === 'routine-def') {
|
||||
content = <DefinitionViewer tab={tab} />;
|
||||
} else if (tab.type === 'table-overview') {
|
||||
content = <TableOverview tab={tab} />;
|
||||
}
|
||||
|
||||
const menuItems: MenuProps['items'] = [
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useEffect, useState, useContext, useMemo, useRef, useCallback } from 'react';
|
||||
import { Table, Tabs, Button, message, Input, Checkbox, Modal, AutoComplete, Tooltip, Select, Empty, Space, Tag } from 'antd';
|
||||
import { Table, Tabs, Button, message, Input, Checkbox, Modal, AutoComplete, Tooltip, Select, Empty, Space, Tag, Radio } from 'antd';
|
||||
import { ReloadOutlined, SaveOutlined, PlusOutlined, DeleteOutlined, MenuOutlined, FileTextOutlined, EyeOutlined, EditOutlined, ExclamationCircleOutlined, CopyOutlined } from '@ant-design/icons';
|
||||
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, DragOverlay } from '@dnd-kit/core';
|
||||
import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
|
||||
@@ -48,6 +48,7 @@ interface ForeignKeyFormState {
|
||||
refColumnNames: string[];
|
||||
}
|
||||
|
||||
// 通用兜底类型列表
|
||||
const COMMON_TYPES = [
|
||||
{ value: 'int' },
|
||||
{ value: 'varchar(255)' },
|
||||
@@ -59,6 +60,148 @@ const COMMON_TYPES = [
|
||||
{ value: 'json' },
|
||||
];
|
||||
|
||||
// 按数据库方言分组的完整字段类型列表
|
||||
const DB_TYPE_OPTIONS: Record<string, { value: string }[]> = {
|
||||
mysql: [
|
||||
// 数值
|
||||
{ value: 'tinyint' },
|
||||
{ value: 'tinyint(1)' },
|
||||
{ value: 'smallint' },
|
||||
{ value: 'mediumint' },
|
||||
{ value: 'int' },
|
||||
{ value: 'bigint' },
|
||||
{ value: 'float' },
|
||||
{ value: 'double' },
|
||||
{ value: 'decimal(10,2)' },
|
||||
// 字符串
|
||||
{ value: 'char(50)' },
|
||||
{ value: 'varchar(255)' },
|
||||
{ value: 'tinytext' },
|
||||
{ value: 'text' },
|
||||
{ value: 'mediumtext' },
|
||||
{ value: 'longtext' },
|
||||
// 二进制
|
||||
{ value: 'binary(255)' },
|
||||
{ value: 'varbinary(255)' },
|
||||
{ value: 'tinyblob' },
|
||||
{ value: 'blob' },
|
||||
{ value: 'mediumblob' },
|
||||
{ value: 'longblob' },
|
||||
// 日期时间
|
||||
{ value: 'date' },
|
||||
{ value: 'time' },
|
||||
{ value: 'datetime' },
|
||||
{ value: 'timestamp' },
|
||||
{ value: 'year' },
|
||||
// 其他
|
||||
{ value: 'json' },
|
||||
{ value: 'enum' },
|
||||
{ value: 'set' },
|
||||
{ value: 'bit(1)' },
|
||||
],
|
||||
postgres: [
|
||||
// 数值
|
||||
{ value: 'smallint' },
|
||||
{ value: 'integer' },
|
||||
{ value: 'bigint' },
|
||||
{ value: 'real' },
|
||||
{ value: 'double precision' },
|
||||
{ value: 'numeric(10,2)' },
|
||||
{ value: 'serial' },
|
||||
{ value: 'bigserial' },
|
||||
// 字符串
|
||||
{ value: 'char(50)' },
|
||||
{ value: 'varchar(255)' },
|
||||
{ value: 'text' },
|
||||
// 布尔
|
||||
{ value: 'boolean' },
|
||||
// 日期时间
|
||||
{ value: 'date' },
|
||||
{ value: 'time' },
|
||||
{ value: 'timestamp' },
|
||||
{ value: 'timestamptz' },
|
||||
{ value: 'interval' },
|
||||
// 二进制
|
||||
{ value: 'bytea' },
|
||||
// JSON
|
||||
{ value: 'json' },
|
||||
{ value: 'jsonb' },
|
||||
// 其他
|
||||
{ value: 'uuid' },
|
||||
{ value: 'inet' },
|
||||
{ value: 'cidr' },
|
||||
{ value: 'macaddr' },
|
||||
{ value: 'xml' },
|
||||
{ value: 'int4range' },
|
||||
{ value: 'tsquery' },
|
||||
{ value: 'tsvector' },
|
||||
],
|
||||
sqlserver: [
|
||||
// 数值
|
||||
{ value: 'tinyint' },
|
||||
{ value: 'smallint' },
|
||||
{ value: 'int' },
|
||||
{ value: 'bigint' },
|
||||
{ value: 'float' },
|
||||
{ value: 'real' },
|
||||
{ value: 'decimal(10,2)' },
|
||||
{ value: 'numeric(10,2)' },
|
||||
{ value: 'money' },
|
||||
{ value: 'smallmoney' },
|
||||
// 字符串
|
||||
{ value: 'char(50)' },
|
||||
{ value: 'varchar(255)' },
|
||||
{ value: 'varchar(max)' },
|
||||
{ value: 'nchar(50)' },
|
||||
{ value: 'nvarchar(255)' },
|
||||
{ value: 'nvarchar(max)' },
|
||||
{ value: 'text' },
|
||||
{ value: 'ntext' },
|
||||
// 日期时间
|
||||
{ value: 'date' },
|
||||
{ value: 'time' },
|
||||
{ value: 'datetime' },
|
||||
{ value: 'datetime2' },
|
||||
{ value: 'datetimeoffset' },
|
||||
{ value: 'smalldatetime' },
|
||||
// 二进制
|
||||
{ value: 'binary(255)' },
|
||||
{ value: 'varbinary(255)' },
|
||||
{ value: 'varbinary(max)' },
|
||||
{ value: 'image' },
|
||||
// 其他
|
||||
{ value: 'bit' },
|
||||
{ value: 'uniqueidentifier' },
|
||||
{ value: 'xml' },
|
||||
],
|
||||
sqlite: [
|
||||
{ value: 'INTEGER' },
|
||||
{ value: 'REAL' },
|
||||
{ value: 'TEXT' },
|
||||
{ value: 'BLOB' },
|
||||
{ value: 'NUMERIC' },
|
||||
],
|
||||
oracle: [
|
||||
{ value: 'NUMBER(10)' },
|
||||
{ value: 'NUMBER(10,2)' },
|
||||
{ value: 'FLOAT' },
|
||||
{ value: 'BINARY_FLOAT' },
|
||||
{ value: 'BINARY_DOUBLE' },
|
||||
{ value: 'CHAR(50)' },
|
||||
{ value: 'VARCHAR2(255)' },
|
||||
{ value: 'NVARCHAR2(255)' },
|
||||
{ value: 'CLOB' },
|
||||
{ value: 'NCLOB' },
|
||||
{ value: 'BLOB' },
|
||||
{ value: 'DATE' },
|
||||
{ value: 'TIMESTAMP' },
|
||||
{ value: 'TIMESTAMP WITH TIME ZONE' },
|
||||
{ value: 'RAW(255)' },
|
||||
{ value: 'LONG RAW' },
|
||||
{ value: 'XMLTYPE' },
|
||||
],
|
||||
};
|
||||
|
||||
const COMMON_DEFAULTS = [
|
||||
{ value: 'CURRENT_TIMESTAMP' },
|
||||
{ value: 'NULL' },
|
||||
@@ -121,7 +264,7 @@ const ResizableTitle = (props: any) => {
|
||||
nextStyle.width = width;
|
||||
}
|
||||
|
||||
if (!width) {
|
||||
if (!onResizeStart) {
|
||||
return <th {...restProps} style={nextStyle} />;
|
||||
}
|
||||
|
||||
@@ -225,7 +368,7 @@ const TableDesigner: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
const [tableCommentDraft, setTableCommentDraft] = useState('');
|
||||
const [isTableCommentModalOpen, setIsTableCommentModalOpen] = useState(false);
|
||||
const [tableCommentSaving, setTableCommentSaving] = useState(false);
|
||||
const [selectedIndex, setSelectedIndex] = useState<IndexDisplayRow | null>(null);
|
||||
const [selectedIndexKeys, setSelectedIndexKeys] = useState<string[]>([]);
|
||||
const [isIndexModalOpen, setIsIndexModalOpen] = useState(false);
|
||||
const [indexModalMode, setIndexModalMode] = useState<'create' | 'edit'>('create');
|
||||
const [indexSaving, setIndexSaving] = useState(false);
|
||||
@@ -270,6 +413,7 @@ const TableDesigner: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
|
||||
const [tableHeight, setTableHeight] = useState(500);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const shellRef = useRef<HTMLDivElement>(null);
|
||||
const pendingFocusColumnKeyRef = useRef<string | null>(null);
|
||||
const focusHighlightTimerRef = useRef<number | null>(null);
|
||||
const [focusColumnKey, setFocusColumnKey] = useState('');
|
||||
@@ -289,47 +433,28 @@ const TableDesigner: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
setCommentEditorValue('');
|
||||
}, []);
|
||||
|
||||
// 初始化透明 Monaco Editor 主题
|
||||
useEffect(() => {
|
||||
loader.init().then(monaco => {
|
||||
monaco.editor.defineTheme('transparent-dark', {
|
||||
base: 'vs-dark',
|
||||
inherit: true,
|
||||
rules: [],
|
||||
colors: {
|
||||
'editor.background': '#00000000',
|
||||
'editor.lineHighlightBackground': '#ffffff10',
|
||||
'editorGutter.background': '#00000000',
|
||||
}
|
||||
});
|
||||
monaco.editor.defineTheme('transparent-light', {
|
||||
base: 'vs',
|
||||
inherit: true,
|
||||
rules: [],
|
||||
colors: {
|
||||
'editor.background': '#00000000',
|
||||
'editor.lineHighlightBackground': '#00000010',
|
||||
'editorGutter.background': '#00000000',
|
||||
}
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
// 透明 Monaco Editor 主题已在 main.tsx 全局注册(含 stickyScroll 不透明背景)
|
||||
|
||||
// 监听字段 Tab 容器高度,为所有 Tab 内表格计算 scroll.y
|
||||
// 当 Tab 切换时,字段 Tab 被 display:none 导致 height=0,跳过该次更新保持有效值
|
||||
useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
const resizeObserver = new ResizeObserver(entries => {
|
||||
for (let entry of entries) {
|
||||
const h = Math.max(200, entry.contentRect.height - 40);
|
||||
setTableHeight(h);
|
||||
const h = entry.contentRect.height;
|
||||
// 跳过零高度观测(Tab 面板被隐藏时)
|
||||
if (h <= 0) return;
|
||||
setTableHeight(Math.max(200, h - 40));
|
||||
}
|
||||
});
|
||||
resizeObserver.observe(containerRef.current);
|
||||
return () => resizeObserver.disconnect();
|
||||
}, [activeKey]); // Re-attach when tab switches
|
||||
}, []); // 不依赖 activeKey,仅挂载一次,通过零高度守卫避免 Tab 切换异常
|
||||
|
||||
// --- Resizable Columns State ---
|
||||
const [tableColumns, setTableColumns] = useState<any[]>([]);
|
||||
const resizeDragRef = useRef<{ startX: number; startWidth: number; index: number; containerLeft: number } | null>(null);
|
||||
const [indexColumns, setIndexColumns] = useState<any[]>([]);
|
||||
const resizeDragRef = useRef<{ startX: number; startWidth: number; index: number; containerLeft: number; setter: React.Dispatch<React.SetStateAction<any[]>> } | null>(null);
|
||||
const resizeRafRef = useRef<number | null>(null);
|
||||
const latestResizeXRef = useRef<number | null>(null);
|
||||
const ghostRef = useRef<HTMLDivElement>(null);
|
||||
@@ -413,11 +538,6 @@ const TableDesigner: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
// Initial Columns Definition
|
||||
useEffect(() => {
|
||||
const initialCols = [
|
||||
...(readOnly ? [] : [{
|
||||
key: 'sort',
|
||||
width: 40,
|
||||
render: () => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />,
|
||||
}]),
|
||||
{
|
||||
title: '名',
|
||||
dataIndex: 'name',
|
||||
@@ -433,7 +553,7 @@ const TableDesigner: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
key: 'type',
|
||||
width: 150,
|
||||
render: (text: string, record: EditableColumn) => readOnly ? text : (
|
||||
<AutoComplete options={COMMON_TYPES} value={text} onChange={val => handleColumnChange(record._key, 'type', val)} style={{ width: '100%' }} variant="borderless" />
|
||||
<AutoComplete options={DB_TYPE_OPTIONS[getDbType()] || COMMON_TYPES} value={text} onChange={val => handleColumnChange(record._key, 'type', val)} style={{ width: '100%' }} variant="borderless" />
|
||||
)
|
||||
},
|
||||
{
|
||||
@@ -548,17 +668,17 @@ const TableDesigner: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
document.body.style.userSelect = '';
|
||||
}, []);
|
||||
|
||||
const handleResizeStart = useCallback((index: number) => (e: React.MouseEvent) => {
|
||||
const createResizeStartHandler = useCallback((columns: any[], setter: React.Dispatch<React.SetStateAction<any[]>>) => (index: number) => (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const startX = e.clientX;
|
||||
const currentWidth = Number(tableColumns[index]?.width || 200);
|
||||
const containerLeft = containerRef.current?.getBoundingClientRect().left ?? 0;
|
||||
resizeDragRef.current = { startX, startWidth: currentWidth, index, containerLeft };
|
||||
const currentWidth = Number(columns[index]?.width || 200);
|
||||
const containerLeft = shellRef.current?.getBoundingClientRect().left ?? 0;
|
||||
resizeDragRef.current = { startX, startWidth: currentWidth, index, containerLeft, setter };
|
||||
latestResizeXRef.current = startX;
|
||||
|
||||
if (ghostRef.current && containerRef.current) {
|
||||
if (ghostRef.current && shellRef.current) {
|
||||
const relativeLeft = startX - containerLeft;
|
||||
ghostRef.current.style.transform = `translateX(${relativeLeft}px)`;
|
||||
ghostRef.current.style.display = 'block';
|
||||
@@ -575,10 +695,10 @@ const TableDesigner: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
|
||||
const onUp = (event: MouseEvent) => {
|
||||
if (resizeDragRef.current) {
|
||||
const { startX: dragStartX, startWidth, index: dragIndex } = resizeDragRef.current;
|
||||
const { startX: dragStartX, startWidth, index: dragIndex, setter: dragSetter } = resizeDragRef.current;
|
||||
const deltaX = event.clientX - dragStartX;
|
||||
const newWidth = Math.max(50, startWidth + deltaX);
|
||||
setTableColumns((prevColumns) => {
|
||||
dragSetter((prevColumns) => {
|
||||
if (!prevColumns[dragIndex]) return prevColumns;
|
||||
const nextColumns = [...prevColumns];
|
||||
nextColumns[dragIndex] = {
|
||||
@@ -598,7 +718,10 @@ const TableDesigner: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
document.addEventListener('mouseup', onUp);
|
||||
document.body.style.cursor = 'col-resize';
|
||||
document.body.style.userSelect = 'none';
|
||||
}, [cleanupResizeState, detachResizeListeners, flushResizeGhost, tableColumns]);
|
||||
}, [cleanupResizeState, detachResizeListeners, flushResizeGhost]);
|
||||
|
||||
const handleResizeStart = useMemo(() => createResizeStartHandler(tableColumns, setTableColumns), [createResizeStartHandler, tableColumns]);
|
||||
const handleIndexResizeStart = useMemo(() => createResizeStartHandler(indexColumns, setIndexColumns), [createResizeStartHandler, indexColumns]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
@@ -1083,6 +1206,11 @@ ${selectedTrigger.statement}`;
|
||||
});
|
||||
}, [indexes]);
|
||||
|
||||
const selectedIndex = useMemo(() => {
|
||||
if (selectedIndexKeys.length === 0) return null;
|
||||
return groupedIndexes.find(idx => selectedIndexKeys.includes(idx.key)) || null;
|
||||
}, [selectedIndexKeys, groupedIndexes]);
|
||||
|
||||
const groupedIndexFieldCount = useMemo(
|
||||
() => groupedIndexes.reduce((total, row) => total + row.columnNames.length, 0),
|
||||
[groupedIndexes]
|
||||
@@ -1161,11 +1289,12 @@ ${selectedTrigger.statement}`;
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedIndex) return;
|
||||
if (!groupedIndexes.some(idx => idx.key === selectedIndex.key)) {
|
||||
setSelectedIndex(null);
|
||||
if (selectedIndexKeys.length === 0) return;
|
||||
const validKeys = selectedIndexKeys.filter(key => groupedIndexes.some(idx => idx.key === key));
|
||||
if (validKeys.length !== selectedIndexKeys.length) {
|
||||
setSelectedIndexKeys(validKeys);
|
||||
}
|
||||
}, [groupedIndexes, selectedIndex]);
|
||||
}, [groupedIndexes, selectedIndexKeys]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedForeignKey) return;
|
||||
@@ -1397,14 +1526,23 @@ ${selectedTrigger.statement}`;
|
||||
ssh: conn.config.ssh || { host: "", port: 22, user: "", password: "", keyPath: "" }
|
||||
};
|
||||
try {
|
||||
const res = await DBQuery(config as any, tab.dbName || '', sql);
|
||||
if (res.success) {
|
||||
message.success(successMessage);
|
||||
await fetchData();
|
||||
return true;
|
||||
// 多条 DDL 语句(如 DROP INDEX + CREATE INDEX)需要逐条执行,
|
||||
// 因为 Go MySQL 驱动默认不支持多语句 Exec。
|
||||
const statements = sql.split(/;\s*\n/).map(s => s.trim()).filter(Boolean);
|
||||
for (let i = 0; i < statements.length; i++) {
|
||||
let stmt = statements[i];
|
||||
if (!stmt.endsWith(';')) stmt += ';';
|
||||
const res = await DBQuery(config as any, tab.dbName || '', stmt);
|
||||
if (!res.success) {
|
||||
const prefix = statements.length > 1 ? `第 ${i + 1}/${statements.length} 条语句执行失败: ` : '执行失败: ';
|
||||
message.error(prefix + res.message);
|
||||
if (i > 0) await fetchData();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
message.error('执行失败: ' + res.message);
|
||||
return false;
|
||||
message.success(successMessage);
|
||||
await fetchData();
|
||||
return true;
|
||||
} catch (e: any) {
|
||||
message.error('执行失败: ' + (e?.message || String(e)));
|
||||
return false;
|
||||
@@ -1696,28 +1834,44 @@ END;`;
|
||||
};
|
||||
|
||||
const handleDeleteIndex = () => {
|
||||
if (!selectedIndex) {
|
||||
message.warning('请先选择一个索引');
|
||||
if (selectedIndexKeys.length === 0) {
|
||||
message.warning('请先选择要删除的索引');
|
||||
return;
|
||||
}
|
||||
if (!supportsIndexSchemaOps()) {
|
||||
message.warning('当前数据库暂不支持在此维护索引');
|
||||
return;
|
||||
}
|
||||
// 根据选中的 key 找到对应的索引对象
|
||||
const toDelete = groupedIndexes.filter(idx => selectedIndexKeys.includes(idx.key));
|
||||
if (toDelete.length === 0) {
|
||||
message.warning('请先选择要删除的索引');
|
||||
return;
|
||||
}
|
||||
const names = toDelete.map(idx => `"${idx.name}"`).join('、');
|
||||
Modal.confirm({
|
||||
title: '确认删除索引',
|
||||
icon: <ExclamationCircleOutlined />,
|
||||
content: `确定删除索引 "${selectedIndex.name}" 吗?`,
|
||||
content: toDelete.length === 1
|
||||
? `确定删除索引 ${names} 吗?`
|
||||
: `确定删除以下 ${toDelete.length} 个索引吗?\n${names}`,
|
||||
okText: '删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
const sql = buildIndexDropSql(selectedIndex.name);
|
||||
if (!sql) {
|
||||
message.warning('当前数据库暂不支持删除该索引');
|
||||
return;
|
||||
const sqls: string[] = [];
|
||||
for (const idx of toDelete) {
|
||||
const sql = buildIndexDropSql(idx.name);
|
||||
if (!sql) {
|
||||
message.warning(`当前数据库暂不支持删除索引 "${idx.name}"`);
|
||||
return;
|
||||
}
|
||||
sqls.push(sql);
|
||||
}
|
||||
const ok = await executeSchemaSql(sqls.join('\n'), toDelete.length === 1 ? '索引删除成功' : `${toDelete.length} 个索引删除成功`);
|
||||
if (ok) {
|
||||
setSelectedIndexKeys([]);
|
||||
}
|
||||
await executeSchemaSql(sql, '索引删除成功');
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -2000,13 +2154,163 @@ END;`;
|
||||
};
|
||||
|
||||
// Merge columns with resize handler
|
||||
const resizableColumns = tableColumns.map((col, index) => ({
|
||||
const resizableColumns = useMemo(() => tableColumns.map((col, index) => ({
|
||||
...col,
|
||||
onHeaderCell: (column: any) => ({
|
||||
width: column.width,
|
||||
onResizeStart: handleResizeStart(index),
|
||||
}),
|
||||
}));
|
||||
})), [tableColumns]);
|
||||
|
||||
// 字段表 Checkbox 选择列(不参与 resize,支持全选)
|
||||
const allColumnKeys = useMemo(() => columns.map(c => c._key), [columns]);
|
||||
const isAllColumnsSelected = allColumnKeys.length > 0 && selectedColumnRowKeys.length === allColumnKeys.length;
|
||||
const isColumnsIndeterminate = selectedColumnRowKeys.length > 0 && selectedColumnRowKeys.length < allColumnKeys.length;
|
||||
|
||||
const columnSelectCol = useMemo(() => ({
|
||||
title: () => (
|
||||
<Checkbox
|
||||
checked={isAllColumnsSelected}
|
||||
indeterminate={isColumnsIndeterminate}
|
||||
onChange={(e: any) => setSelectedColumnRowKeys(e.target.checked ? allColumnKeys : [])}
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
),
|
||||
dataIndex: '_select',
|
||||
key: '_select',
|
||||
width: 48,
|
||||
render: (_: any, record: any) => (
|
||||
<Checkbox
|
||||
checked={selectedColumnRowKeys.includes(record._key)}
|
||||
onChange={(e: any) => {
|
||||
e.stopPropagation();
|
||||
setSelectedColumnRowKeys((prev: string[]) =>
|
||||
e.target.checked
|
||||
? [...prev, record._key]
|
||||
: prev.filter((k: string) => k !== record._key)
|
||||
);
|
||||
}}
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
),
|
||||
}), [selectedColumnRowKeys, allColumnKeys, isAllColumnsSelected, isColumnsIndeterminate]);
|
||||
|
||||
// sort 拖拽列(不参与 resize)
|
||||
const sortColumn = useMemo(() => ({
|
||||
key: 'sort',
|
||||
width: 40,
|
||||
render: () => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />,
|
||||
}), []);
|
||||
|
||||
const columnsWithSelect = useMemo(() =>
|
||||
readOnly
|
||||
? resizableColumns
|
||||
: [columnSelectCol, sortColumn, ...resizableColumns],
|
||||
[readOnly, columnSelectCol, sortColumn, resizableColumns]
|
||||
);
|
||||
|
||||
// --- Index Columns Init ---
|
||||
useEffect(() => {
|
||||
setIndexColumns([
|
||||
{
|
||||
title: '索引名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 240,
|
||||
render: (text: string) => (
|
||||
<Tooltip title={text}>
|
||||
<span style={{ display: 'inline-block', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{text}
|
||||
</span>
|
||||
</Tooltip>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '字段',
|
||||
dataIndex: 'columnNames',
|
||||
key: 'columnNames',
|
||||
width: 320,
|
||||
render: (columnNames: string[]) => {
|
||||
if (!columnNames || columnNames.length === 0) {
|
||||
return '-';
|
||||
}
|
||||
return (
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
|
||||
{columnNames.map((columnName: string, idx: number) => (
|
||||
<Tag key={`${columnName}-${idx}`}>
|
||||
{columnName}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '索引类型',
|
||||
dataIndex: 'indexType',
|
||||
key: 'indexType',
|
||||
width: 140,
|
||||
render: (text: string) => text || '-',
|
||||
},
|
||||
{
|
||||
title: '唯一性',
|
||||
dataIndex: 'nonUnique',
|
||||
key: 'nonUnique',
|
||||
width: 110,
|
||||
render: (v: number) => (
|
||||
<Tag color={v === 0 ? 'gold' : 'default'}>
|
||||
{v === 0 ? '唯一' : '普通'}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
]);
|
||||
}, []);
|
||||
|
||||
// Checkbox 选择列(不参与 resize,支持全选)
|
||||
const allIndexKeys = groupedIndexes.map(idx => idx.key);
|
||||
const isAllSelected = allIndexKeys.length > 0 && selectedIndexKeys.length === allIndexKeys.length;
|
||||
const isIndeterminate = selectedIndexKeys.length > 0 && selectedIndexKeys.length < allIndexKeys.length;
|
||||
|
||||
const selectColumn = {
|
||||
title: () => (
|
||||
<Checkbox
|
||||
checked={isAllSelected}
|
||||
indeterminate={isIndeterminate}
|
||||
onChange={(e) => {
|
||||
setSelectedIndexKeys(e.target.checked ? allIndexKeys : []);
|
||||
}}
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
),
|
||||
dataIndex: '_select',
|
||||
key: '_select',
|
||||
width: 48,
|
||||
render: (_: any, record: any) => (
|
||||
<Checkbox
|
||||
checked={selectedIndexKeys.includes(record.key)}
|
||||
onChange={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedIndexKeys(prev =>
|
||||
e.target.checked
|
||||
? [...prev, record.key]
|
||||
: prev.filter(k => k !== record.key)
|
||||
);
|
||||
}}
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
const resizableIndexColumns = [
|
||||
selectColumn,
|
||||
...indexColumns.map((col, index) => ({
|
||||
...col,
|
||||
onHeaderCell: (column: any) => ({
|
||||
width: column.width,
|
||||
onResizeStart: handleIndexResizeStart(index),
|
||||
}),
|
||||
})),
|
||||
];
|
||||
|
||||
const columnsTabContent = (
|
||||
<div
|
||||
@@ -2030,7 +2334,7 @@ END;`;
|
||||
{readOnly ? (
|
||||
<Table
|
||||
dataSource={columns}
|
||||
columns={resizableColumns}
|
||||
columns={columnsWithSelect}
|
||||
rowKey="_key"
|
||||
rowClassName={(record: EditableColumn) => record._key === focusColumnKey ? 'table-designer-focus-row' : ''}
|
||||
size="small"
|
||||
@@ -2049,11 +2353,7 @@ END;`;
|
||||
<SortableContext items={columns.map(c => c._key)} strategy={verticalListSortingStrategy}>
|
||||
<Table
|
||||
dataSource={columns}
|
||||
columns={resizableColumns}
|
||||
rowSelection={{
|
||||
selectedRowKeys: selectedColumnRowKeys,
|
||||
onChange: (nextSelectedRowKeys) => setSelectedColumnRowKeys(nextSelectedRowKeys as string[]),
|
||||
}}
|
||||
columns={columnsWithSelect}
|
||||
rowKey="_key"
|
||||
rowClassName={(record: EditableColumn) => record._key === focusColumnKey ? 'table-designer-focus-row' : ''}
|
||||
size="small"
|
||||
@@ -2069,6 +2369,86 @@ END;`;
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div ref={shellRef} className="table-designer-shell" style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0, padding: '6px 0', position: 'relative' }}>
|
||||
<style>{`
|
||||
.table-designer-shell .ant-table,
|
||||
.table-designer-shell .ant-table-wrapper,
|
||||
.table-designer-shell .ant-table-container {
|
||||
background: transparent !important;
|
||||
}
|
||||
.table-designer-shell .ant-table-wrapper {
|
||||
border: none !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.table-designer-shell .ant-table-container {
|
||||
border: none !important;
|
||||
}
|
||||
.table-designer-shell .ant-table-thead > tr > th {
|
||||
background: transparent !important;
|
||||
border-bottom: 1px solid ${darkMode ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)'} !important;
|
||||
border-inline-end: 1px solid transparent !important;
|
||||
}
|
||||
.table-designer-shell .ant-table-tbody > tr > td,
|
||||
.table-designer-shell .ant-table-tbody .ant-table-row > .ant-table-cell {
|
||||
background: transparent !important;
|
||||
border-bottom: 1px solid ${darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'} !important;
|
||||
border-inline-end: 1px solid transparent !important;
|
||||
}
|
||||
.table-designer-shell .ant-table-tbody td .ant-input {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
.table-designer-shell .ant-table-tbody td .ant-select .ant-select-selector {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
.table-designer-shell .ant-table-thead > tr > th::before {
|
||||
display: none !important;
|
||||
}
|
||||
.table-designer-shell .ant-table-thead > tr > th {
|
||||
cursor: default !important;
|
||||
user-select: none !important;
|
||||
-webkit-user-select: none !important;
|
||||
}
|
||||
.table-designer-shell .ant-table-tbody > tr:hover > td,
|
||||
.table-designer-shell .ant-table-tbody .ant-table-row:hover > .ant-table-cell {
|
||||
background: ${darkMode ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.02)'} !important;
|
||||
}
|
||||
.table-designer-shell .ant-tabs-nav {
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
.table-designer-shell .ant-tabs-nav::before {
|
||||
border-bottom-color: ${darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'} !important;
|
||||
}
|
||||
.table-designer-shell .ant-tabs-ink-bar {
|
||||
will-change: transform;
|
||||
transition: width 0.15s ease, left 0.15s ease, transform 0.15s ease !important;
|
||||
}
|
||||
.table-designer-shell .ant-tabs-tab {
|
||||
transition: color 0.15s ease !important;
|
||||
}
|
||||
.table-designer-shell .ant-tabs-content-holder,
|
||||
.table-designer-shell .ant-tabs-content,
|
||||
.table-designer-shell .ant-tabs-tabpane {
|
||||
height: 100%;
|
||||
}
|
||||
.table-designer-shell .react-resizable-handle {
|
||||
position: absolute !important;
|
||||
right: 0 !important;
|
||||
top: 0 !important;
|
||||
bottom: 0 !important;
|
||||
width: 10px !important;
|
||||
height: auto !important;
|
||||
background-position: top right !important;
|
||||
cursor: col-resize !important;
|
||||
z-index: 10;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
`}</style>
|
||||
<div
|
||||
ref={ghostRef}
|
||||
style={{
|
||||
@@ -2084,52 +2464,6 @@ END;`;
|
||||
willChange: 'transform',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="table-designer-shell" style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0, padding: '6px 0' }}>
|
||||
<style>{`
|
||||
.table-designer-shell .ant-table,
|
||||
.table-designer-shell .ant-table-wrapper,
|
||||
.table-designer-shell .ant-table-container {
|
||||
background: transparent !important;
|
||||
}
|
||||
.table-designer-shell .ant-table-wrapper,
|
||||
.table-designer-shell .ant-table-container {
|
||||
border: none !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.table-designer-shell .ant-table-thead > tr > th {
|
||||
background: transparent !important;
|
||||
border-bottom: 1px solid ${darkMode ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)'} !important;
|
||||
border-inline-end: 1px solid transparent !important;
|
||||
}
|
||||
.table-designer-shell .ant-table-tbody > tr > td,
|
||||
.table-designer-shell .ant-table-tbody .ant-table-row > .ant-table-cell {
|
||||
background: transparent !important;
|
||||
border-bottom: 1px solid ${darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'} !important;
|
||||
border-inline-end: 1px solid transparent !important;
|
||||
}
|
||||
.table-designer-shell .ant-table-thead > tr > th::before {
|
||||
display: none !important;
|
||||
}
|
||||
.table-designer-shell .ant-table-tbody > tr:hover > td,
|
||||
.table-designer-shell .ant-table-tbody .ant-table-row:hover > .ant-table-cell {
|
||||
background: ${darkMode ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.02)'} !important;
|
||||
}
|
||||
.table-designer-shell .ant-tabs-nav {
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
.table-designer-shell .ant-tabs-nav::before {
|
||||
border-bottom-color: ${darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'} !important;
|
||||
}
|
||||
.table-designer-shell .ant-tabs-content-holder,
|
||||
.table-designer-shell .ant-tabs-content,
|
||||
.table-designer-shell .ant-tabs-tabpane {
|
||||
height: 100%;
|
||||
}
|
||||
`}</style>
|
||||
<div
|
||||
style={{
|
||||
padding: '10px 12px 8px 12px',
|
||||
@@ -2202,7 +2536,7 @@ END;`;
|
||||
</div>
|
||||
<Tabs
|
||||
activeKey={activeKey}
|
||||
onChange={setActiveKey}
|
||||
onChange={(key) => React.startTransition(() => setActiveKey(key))}
|
||||
style={{
|
||||
flex: 1,
|
||||
minHeight: 0,
|
||||
@@ -2225,20 +2559,20 @@ END;`;
|
||||
key: 'indexes',
|
||||
label: '索引',
|
||||
children: (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
<div className="index-table-wrap" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{!readOnly && (
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<Button size="small" icon={<PlusOutlined />} disabled={!supportsIndexSchemaOps()} onClick={openCreateIndexModal}>新增</Button>
|
||||
<Button size="small" icon={<EditOutlined />} disabled={!supportsIndexSchemaOps() || !selectedIndex} onClick={openEditIndexModal}>修改</Button>
|
||||
<Button size="small" icon={<DeleteOutlined />} danger disabled={!supportsIndexSchemaOps() || !selectedIndex} onClick={handleDeleteIndex}>删除</Button>
|
||||
<Button size="small" icon={<EditOutlined />} disabled={!supportsIndexSchemaOps() || selectedIndexKeys.length !== 1} onClick={openEditIndexModal}>修改</Button>
|
||||
<Button size="small" icon={<DeleteOutlined />} danger disabled={!supportsIndexSchemaOps() || selectedIndexKeys.length === 0} onClick={handleDeleteIndex}>删除</Button>
|
||||
{!supportsIndexSchemaOps() && (
|
||||
<span style={{ marginLeft: 'auto', color: '#faad14', fontSize: 12, alignSelf: 'center' }}>
|
||||
当前数据库暂不支持索引编辑,仅支持查看
|
||||
</span>
|
||||
)}
|
||||
{supportsIndexSchemaOps() && selectedIndex && (
|
||||
{supportsIndexSchemaOps() && selectedIndexKeys.length > 0 && (
|
||||
<span style={{ marginLeft: 'auto', color: '#888', fontSize: 12, alignSelf: 'center' }}>
|
||||
已选择:{selectedIndex.name}
|
||||
已选择:{selectedIndexKeys.length} 个索引
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
@@ -2248,75 +2582,22 @@ END;`;
|
||||
</div>
|
||||
<Table
|
||||
dataSource={groupedIndexes}
|
||||
columns={[
|
||||
{
|
||||
title: '索引名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 240,
|
||||
render: (text: string) => (
|
||||
<Tooltip title={text}>
|
||||
<span style={{ display: 'inline-block', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{text}
|
||||
</span>
|
||||
</Tooltip>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '字段',
|
||||
dataIndex: 'columnNames',
|
||||
key: 'columnNames',
|
||||
render: (columnNames: string[]) => {
|
||||
if (!columnNames || columnNames.length === 0) {
|
||||
return '-';
|
||||
}
|
||||
return (
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
|
||||
{columnNames.map((columnName, idx) => (
|
||||
<Tag key={`${columnName}-${idx}`}>
|
||||
{columnName}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '索引类型',
|
||||
dataIndex: 'indexType',
|
||||
key: 'indexType',
|
||||
width: 140,
|
||||
render: (text: string) => text || '-',
|
||||
},
|
||||
{
|
||||
title: '唯一性',
|
||||
dataIndex: 'nonUnique',
|
||||
key: 'nonUnique',
|
||||
width: 110,
|
||||
render: (v: number) => (
|
||||
<Tag color={v === 0 ? 'gold' : 'default'}>
|
||||
{v === 0 ? '唯一' : '普通'}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
]}
|
||||
columns={resizableIndexColumns}
|
||||
rowKey="key"
|
||||
size="small"
|
||||
pagination={false}
|
||||
loading={loading}
|
||||
scroll={{ x: 960, y: tableHeight }}
|
||||
rowSelection={{
|
||||
type: 'radio',
|
||||
selectedRowKeys: selectedIndex ? [selectedIndex.key] : [],
|
||||
onChange: (_, selectedRows) => setSelectedIndex((selectedRows[0] as IndexDisplayRow) || null),
|
||||
components={{
|
||||
header: { cell: ResizableTitle },
|
||||
}}
|
||||
onRow={(record) => ({
|
||||
onClick: () => {
|
||||
if (selectedIndex?.key === record.key) {
|
||||
setSelectedIndex(null);
|
||||
} else {
|
||||
setSelectedIndex(record);
|
||||
}
|
||||
setSelectedIndexKeys(prev =>
|
||||
prev.includes(record.key)
|
||||
? prev.filter(k => k !== record.key)
|
||||
: [...prev, record.key]
|
||||
);
|
||||
},
|
||||
style: { cursor: 'pointer' }
|
||||
})}
|
||||
@@ -2420,6 +2701,7 @@ END;`;
|
||||
size="small"
|
||||
pagination={false}
|
||||
loading={loading}
|
||||
scroll={{ y: tableHeight }}
|
||||
locale={{ emptyText: <Empty description="该表暂无触发器" image={Empty.PRESENTED_IMAGE_SIMPLE} /> }}
|
||||
rowSelection={{
|
||||
type: 'radio',
|
||||
@@ -2676,7 +2958,7 @@ END;`;
|
||||
cancelText="取消"
|
||||
>
|
||||
<div style={{ maxHeight: '400px', overflow: 'auto' }}>
|
||||
<pre style={{ background: '#f5f5f5', padding: '10px', borderRadius: '4px', border: '1px solid #eee', whiteSpace: 'pre-wrap' }}>
|
||||
<pre style={{ background: darkMode ? '#1e1e1e' : '#f5f5f5', color: darkMode ? '#d4d4d4' : 'inherit', padding: '10px', borderRadius: '4px', border: darkMode ? '1px solid #333' : '1px solid #eee', whiteSpace: 'pre-wrap' }}>
|
||||
{previewSql}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
456
frontend/src/components/TableOverview.tsx
Normal file
@@ -0,0 +1,456 @@
|
||||
import React, { useState, useEffect, useMemo, useCallback } from 'react';
|
||||
import { Input, Spin, Empty, Dropdown, message, Tooltip, Modal } from 'antd';
|
||||
import { TableOutlined, SearchOutlined, ReloadOutlined, SortAscendingOutlined, DatabaseOutlined, ConsoleSqlOutlined, EditOutlined, CopyOutlined, SaveOutlined, DeleteOutlined, ExportOutlined } from '@ant-design/icons';
|
||||
import { useStore } from '../store';
|
||||
import { DBQuery, DBShowCreateTable, ExportTable, DropTable, RenameTable } from '../../wailsjs/go/app/App';
|
||||
import type { TabData } from '../types';
|
||||
|
||||
interface TableOverviewProps {
|
||||
tab: TabData;
|
||||
}
|
||||
|
||||
interface TableStatRow {
|
||||
name: string;
|
||||
comment: string;
|
||||
rows: number;
|
||||
dataSize: number;
|
||||
indexSize: number;
|
||||
engine: string;
|
||||
createTime: string;
|
||||
updateTime: string;
|
||||
}
|
||||
|
||||
type SortField = 'name' | 'rows' | 'dataSize';
|
||||
type SortOrder = 'asc' | 'desc';
|
||||
|
||||
const formatSize = (bytes: number): string => {
|
||||
if (!bytes || bytes <= 0) return '—';
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
|
||||
};
|
||||
|
||||
const formatRows = (count: number): string => {
|
||||
if (count === undefined || count === null || count < 0) return '—';
|
||||
if (count >= 1_000_000) return `${(count / 1_000_000).toFixed(1)}M`;
|
||||
if (count >= 1_000) return `${(count / 1_000).toFixed(1)}K`;
|
||||
return String(count);
|
||||
};
|
||||
|
||||
const getMetadataDialect = (connType: string, driver?: string): string => {
|
||||
const type = (connType || '').trim().toLowerCase();
|
||||
if (type === 'custom') {
|
||||
const d = (driver || '').trim().toLowerCase();
|
||||
if (d === 'diros' || d === 'doris') return 'mysql';
|
||||
return d;
|
||||
}
|
||||
if (type === 'mariadb' || type === 'diros' || type === 'sphinx') return 'mysql';
|
||||
if (type === 'dameng') return 'dm';
|
||||
return type;
|
||||
};
|
||||
|
||||
const buildTableStatusSQL = (dialect: string, dbName: string, schemaName?: string): string => {
|
||||
const escapeLiteral = (s: string) => s.replace(/'/g, "''");
|
||||
switch (dialect) {
|
||||
case 'mysql':
|
||||
return `SHOW TABLE STATUS FROM \`${dbName.replace(/`/g, '``')}\``;
|
||||
case 'postgres':
|
||||
case 'kingbase':
|
||||
case 'vastbase':
|
||||
case 'highgo': {
|
||||
const schema = schemaName || 'public';
|
||||
return `
|
||||
SELECT
|
||||
n.nspname || '.' || c.relname AS table_name,
|
||||
obj_description(c.oid, 'pg_class') AS table_comment,
|
||||
c.reltuples::bigint AS table_rows,
|
||||
pg_total_relation_size(c.oid) AS data_length,
|
||||
pg_indexes_size(c.oid) AS index_length
|
||||
FROM pg_class c
|
||||
JOIN pg_namespace n ON n.oid = c.relnamespace
|
||||
WHERE c.relkind = 'r'
|
||||
AND n.nspname = '${escapeLiteral(schema)}'
|
||||
ORDER BY c.relname`;
|
||||
}
|
||||
case 'sqlserver': {
|
||||
const safeDB = `[${dbName.replace(/]/g, ']]')}]`;
|
||||
return `
|
||||
SELECT
|
||||
s.name + '.' + t.name AS table_name,
|
||||
ep.value AS table_comment,
|
||||
SUM(p.rows) AS table_rows,
|
||||
SUM(a.total_pages) * 8 * 1024 AS data_length,
|
||||
SUM(a.used_pages) * 8 * 1024 AS index_length
|
||||
FROM ${safeDB}.sys.tables t
|
||||
JOIN ${safeDB}.sys.schemas s ON t.schema_id = s.schema_id
|
||||
LEFT JOIN ${safeDB}.sys.extended_properties ep ON ep.major_id = t.object_id AND ep.minor_id = 0 AND ep.name = 'MS_Description'
|
||||
LEFT JOIN ${safeDB}.sys.partitions p ON t.object_id = p.object_id AND p.index_id IN (0, 1)
|
||||
LEFT JOIN ${safeDB}.sys.allocation_units a ON p.partition_id = a.container_id
|
||||
WHERE t.type = 'U'
|
||||
GROUP BY s.name, t.name, ep.value
|
||||
ORDER BY s.name, t.name`;
|
||||
}
|
||||
case 'clickhouse':
|
||||
return `SELECT name AS table_name, comment AS table_comment, total_rows AS table_rows, total_bytes AS data_length, 0 AS index_length FROM system.tables WHERE database = '${escapeLiteral(dbName)}' AND engine NOT IN ('View', 'MaterializedView') ORDER BY name`;
|
||||
case 'dm':
|
||||
case 'oracle': {
|
||||
const owner = (schemaName || dbName).toUpperCase();
|
||||
return `SELECT table_name, comments AS table_comment, num_rows AS table_rows, 0 AS data_length, 0 AS index_length FROM all_tab_comments JOIN all_tables USING (table_name, owner) WHERE owner = '${escapeLiteral(owner)}' ORDER BY table_name`;
|
||||
}
|
||||
default:
|
||||
return `SELECT table_name, '' AS table_comment, 0 AS table_rows, 0 AS data_length, 0 AS index_length FROM information_schema.tables WHERE table_schema = '${escapeLiteral(dbName)}' AND table_type = 'BASE TABLE' ORDER BY table_name`;
|
||||
}
|
||||
};
|
||||
|
||||
const parseTableStats = (dialect: string, rows: Record<string, any>[]): TableStatRow[] => {
|
||||
return rows.map((row) => {
|
||||
const get = (keys: string[]): any => {
|
||||
for (const k of keys) {
|
||||
for (const rk of Object.keys(row)) {
|
||||
if (rk.toLowerCase() === k.toLowerCase() && row[rk] !== null && row[rk] !== undefined) return row[rk];
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
const strVal = (keys: string[]) => String(get(keys) ?? '').trim();
|
||||
const numVal = (keys: string[]) => {
|
||||
const v = get(keys);
|
||||
if (v === null || v === undefined || v === '') return 0;
|
||||
const n = Number(v);
|
||||
return isNaN(n) ? 0 : Math.max(0, Math.round(n));
|
||||
};
|
||||
|
||||
return {
|
||||
name: strVal(['Name', 'table_name', 'tablename', 'TABLE_NAME']),
|
||||
comment: strVal(['Comment', 'table_comment', 'TABLE_COMMENT', 'comments']),
|
||||
rows: numVal(['Rows', 'table_rows', 'TABLE_ROWS', 'num_rows', 'reltuples', 'total_rows']),
|
||||
dataSize: numVal(['Data_length', 'data_length', 'DATA_LENGTH', 'total_bytes']),
|
||||
indexSize: numVal(['Index_length', 'index_length', 'INDEX_LENGTH']),
|
||||
engine: strVal(['Engine', 'engine']),
|
||||
createTime: strVal(['Create_time', 'create_time']),
|
||||
updateTime: strVal(['Update_time', 'update_time']),
|
||||
};
|
||||
}).filter(t => t.name);
|
||||
};
|
||||
|
||||
const TableOverview: React.FC<TableOverviewProps> = ({ tab }) => {
|
||||
const connections = useStore(state => state.connections);
|
||||
const theme = useStore(state => state.theme);
|
||||
const addTab = useStore(state => state.addTab);
|
||||
const darkMode = theme === 'dark';
|
||||
|
||||
const [tables, setTables] = useState<TableStatRow[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [sortField, setSortField] = useState<SortField>('name');
|
||||
const [sortOrder, setSortOrder] = useState<SortOrder>('asc');
|
||||
|
||||
const connection = useMemo(() => connections.find(c => c.id === tab.connectionId), [connections, tab.connectionId]);
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
if (!connection) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const config = {
|
||||
...connection.config,
|
||||
port: Number(connection.config.port),
|
||||
password: connection.config.password || '',
|
||||
database: connection.config.database || '',
|
||||
useSSH: connection.config.useSSH || false,
|
||||
ssh: connection.config.ssh || { host: '', port: 22, user: '', password: '', keyPath: '' },
|
||||
};
|
||||
const dialect = getMetadataDialect(connection.config.type, (connection.config as any)?.driver);
|
||||
const sql = buildTableStatusSQL(dialect, tab.dbName || '', (tab as any).schemaName);
|
||||
const res = await DBQuery(config as any, tab.dbName || '', sql);
|
||||
if (res.success && Array.isArray(res.data)) {
|
||||
setTables(parseTableStats(dialect, res.data));
|
||||
} else {
|
||||
message.error('获取表信息失败: ' + (res.message || '未知错误'));
|
||||
}
|
||||
} catch (e: any) {
|
||||
message.error('获取表信息失败: ' + (e?.message || String(e)));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [connection, tab.dbName]);
|
||||
|
||||
useEffect(() => { loadData(); }, [loadData]);
|
||||
|
||||
const sortedFiltered = useMemo(() => {
|
||||
let list = [...tables];
|
||||
if (searchText.trim()) {
|
||||
const kw = searchText.trim().toLowerCase();
|
||||
list = list.filter(t => t.name.toLowerCase().includes(kw) || t.comment.toLowerCase().includes(kw));
|
||||
}
|
||||
list.sort((a, b) => {
|
||||
let cmp = 0;
|
||||
if (sortField === 'name') cmp = a.name.toLowerCase().localeCompare(b.name.toLowerCase());
|
||||
else if (sortField === 'rows') cmp = a.rows - b.rows;
|
||||
else if (sortField === 'dataSize') cmp = a.dataSize - b.dataSize;
|
||||
return sortOrder === 'asc' ? cmp : -cmp;
|
||||
});
|
||||
return list;
|
||||
}, [tables, searchText, sortField, sortOrder]);
|
||||
|
||||
const openTable = useCallback((tableName: string) => {
|
||||
if (!connection) return;
|
||||
addTab({
|
||||
id: `${connection.id}-${tab.dbName}-${tableName}`,
|
||||
title: tableName,
|
||||
type: 'table',
|
||||
connectionId: connection.id,
|
||||
dbName: tab.dbName,
|
||||
tableName,
|
||||
});
|
||||
}, [connection, tab.dbName, addTab]);
|
||||
|
||||
const openDesign = useCallback((tableName: string) => {
|
||||
if (!connection) return;
|
||||
addTab({
|
||||
id: `design-${connection.id}-${tab.dbName}-${tableName}`,
|
||||
title: `设计表 (${tableName})`,
|
||||
type: 'design',
|
||||
connectionId: connection.id,
|
||||
dbName: tab.dbName,
|
||||
tableName,
|
||||
initialTab: 'columns',
|
||||
readOnly: false,
|
||||
});
|
||||
}, [connection, tab.dbName, addTab]);
|
||||
|
||||
const buildConfig = useCallback(() => {
|
||||
if (!connection) return null;
|
||||
return {
|
||||
...connection.config,
|
||||
port: Number(connection.config.port),
|
||||
password: connection.config.password || '',
|
||||
database: connection.config.database || '',
|
||||
useSSH: connection.config.useSSH || false,
|
||||
ssh: connection.config.ssh || { host: '', port: 22, user: '', password: '', keyPath: '' },
|
||||
};
|
||||
}, [connection]);
|
||||
|
||||
const handleCopyStructure = useCallback(async (tableName: string) => {
|
||||
const config = buildConfig();
|
||||
if (!config) return;
|
||||
const res = await DBShowCreateTable(config as any, tab.dbName || '', tableName);
|
||||
if (res.success) {
|
||||
navigator.clipboard.writeText(res.data as string);
|
||||
message.success('表结构已复制到剪贴板');
|
||||
} else {
|
||||
message.error(res.message);
|
||||
}
|
||||
}, [buildConfig, tab.dbName]);
|
||||
|
||||
const handleExport = useCallback(async (tableName: string, format: string) => {
|
||||
const config = buildConfig();
|
||||
if (!config) return;
|
||||
const hide = message.loading(`正在导出 ${tableName} 为 ${format.toUpperCase()}...`, 0);
|
||||
const res = await ExportTable(config as any, tab.dbName || '', tableName, format);
|
||||
hide();
|
||||
if (res.success) {
|
||||
message.success('导出成功');
|
||||
} else if (res.message !== '已取消') {
|
||||
message.error('导出失败: ' + res.message);
|
||||
}
|
||||
}, [buildConfig, tab.dbName]);
|
||||
|
||||
const handleDeleteTable = useCallback((tableName: string) => {
|
||||
const config = buildConfig();
|
||||
if (!config) return;
|
||||
Modal.confirm({
|
||||
title: '确认删除表',
|
||||
content: `确定删除表 "${tableName}" 吗?该操作不可恢复。`,
|
||||
okButtonProps: { danger: true },
|
||||
onOk: async () => {
|
||||
const res = await DropTable(config as any, tab.dbName || '', tableName);
|
||||
if (res.success) {
|
||||
message.success('表删除成功');
|
||||
loadData();
|
||||
} else {
|
||||
message.error('删除失败: ' + res.message);
|
||||
}
|
||||
},
|
||||
});
|
||||
}, [buildConfig, tab.dbName, loadData]);
|
||||
|
||||
const handleRenameTable = useCallback((tableName: string) => {
|
||||
const config = buildConfig();
|
||||
if (!config) return;
|
||||
let newName = tableName;
|
||||
Modal.confirm({
|
||||
title: '重命名表',
|
||||
content: (
|
||||
<Input
|
||||
defaultValue={tableName}
|
||||
onChange={e => { newName = e.target.value; }}
|
||||
placeholder="输入新表名"
|
||||
autoFocus
|
||||
style={{ marginTop: 8 }}
|
||||
/>
|
||||
),
|
||||
onOk: async () => {
|
||||
const trimmed = newName.trim();
|
||||
if (!trimmed) { message.error('表名不能为空'); return Promise.reject(); }
|
||||
if (trimmed === tableName) { message.warning('新旧表名相同'); return; }
|
||||
const res = await RenameTable(config as any, tab.dbName || '', tableName, trimmed);
|
||||
if (res.success) {
|
||||
message.success('表重命名成功');
|
||||
loadData();
|
||||
} else {
|
||||
message.error('重命名失败: ' + res.message);
|
||||
}
|
||||
},
|
||||
});
|
||||
}, [buildConfig, tab.dbName, loadData]);
|
||||
|
||||
// --- Theme ---
|
||||
const cardBg = darkMode ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.02)';
|
||||
const cardHoverBg = darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.04)';
|
||||
const cardBorder = darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)';
|
||||
const textPrimary = darkMode ? 'rgba(255,255,255,0.88)' : 'rgba(0,0,0,0.88)';
|
||||
const textSecondary = darkMode ? 'rgba(255,255,255,0.55)' : 'rgba(0,0,0,0.55)';
|
||||
const textMuted = darkMode ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.35)';
|
||||
const accentColor = '#1677ff';
|
||||
const containerBg = darkMode ? 'rgba(0,0,0,0.15)' : 'rgba(0,0,0,0.01)';
|
||||
|
||||
const toggleSort = (field: SortField) => {
|
||||
if (sortField === field) {
|
||||
setSortOrder(o => o === 'asc' ? 'desc' : 'asc');
|
||||
} else {
|
||||
setSortField(field);
|
||||
setSortOrder(field === 'name' ? 'asc' : 'desc');
|
||||
}
|
||||
};
|
||||
|
||||
const sortMenuItems = [
|
||||
{ key: 'name', label: `按名称${sortField === 'name' ? (sortOrder === 'asc' ? ' ↑' : ' ↓') : ''}`, onClick: () => toggleSort('name') },
|
||||
{ key: 'rows', label: `按行数${sortField === 'rows' ? (sortOrder === 'asc' ? ' ↑' : ' ↓') : ''}`, onClick: () => toggleSort('rows') },
|
||||
{ key: 'dataSize', label: `按大小${sortField === 'dataSize' ? (sortOrder === 'asc' ? ' ↑' : ' ↓') : ''}`, onClick: () => toggleSort('dataSize') },
|
||||
];
|
||||
|
||||
const totalRows = tables.reduce((s, t) => s + t.rows, 0);
|
||||
const totalSize = tables.reduce((s, t) => s + t.dataSize + t.indexSize, 0);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', background: containerBg }}>
|
||||
<Spin size="large" tip="加载表信息..." />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: containerBg, overflow: 'hidden' }}>
|
||||
{/* Toolbar */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 16px', flexShrink: 0 }}>
|
||||
<DatabaseOutlined style={{ fontSize: 16, color: accentColor }} />
|
||||
<span style={{ fontSize: 14, fontWeight: 600, color: textPrimary }}>{tab.dbName}</span>
|
||||
<span style={{ fontSize: 12, color: textMuted }}>
|
||||
{tables.length} 张表 · {formatRows(totalRows)} 行 · {formatSize(totalSize)}
|
||||
</span>
|
||||
<div style={{ flex: 1 }} />
|
||||
<Input
|
||||
placeholder="搜索表名或注释..."
|
||||
prefix={<SearchOutlined style={{ color: textMuted }} />}
|
||||
value={searchText}
|
||||
onChange={e => setSearchText(e.target.value)}
|
||||
allowClear
|
||||
style={{ width: 240 }}
|
||||
size="small"
|
||||
/>
|
||||
<Dropdown menu={{ items: sortMenuItems }} trigger={['click']}>
|
||||
<Tooltip title="排序"><SortAscendingOutlined style={{ fontSize: 16, color: textSecondary, cursor: 'pointer' }} /></Tooltip>
|
||||
</Dropdown>
|
||||
<Tooltip title="刷新"><ReloadOutlined onClick={loadData} style={{ fontSize: 16, color: textSecondary, cursor: 'pointer' }} /></Tooltip>
|
||||
</div>
|
||||
|
||||
{/* Cards Grid */}
|
||||
<div style={{ flex: 1, overflow: 'auto', padding: '0 16px 16px 16px' }}>
|
||||
{sortedFiltered.length === 0 ? (
|
||||
<Empty description={searchText ? '无匹配结果' : '暂无表'} style={{ marginTop: 80 }} />
|
||||
) : (
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
|
||||
gap: 12,
|
||||
}}>
|
||||
{sortedFiltered.map(t => (
|
||||
<Dropdown
|
||||
key={t.name}
|
||||
trigger={['contextMenu']}
|
||||
menu={{
|
||||
items: [
|
||||
{ key: 'new-query', label: '新建查询', icon: <ConsoleSqlOutlined />, onClick: () => {
|
||||
addTab({
|
||||
id: `query-${Date.now()}`,
|
||||
title: '新建查询',
|
||||
type: 'query',
|
||||
connectionId: tab.connectionId,
|
||||
dbName: tab.dbName,
|
||||
query: `SELECT * FROM ${t.name};`,
|
||||
});
|
||||
}},
|
||||
{ type: 'divider' },
|
||||
{ key: 'design-table', label: '设计表', icon: <EditOutlined />, onClick: () => openDesign(t.name) },
|
||||
{ key: 'copy-structure', label: '复制表结构', icon: <CopyOutlined />, onClick: () => handleCopyStructure(t.name) },
|
||||
{ key: 'backup-table', label: '备份表 (SQL)', icon: <SaveOutlined />, onClick: () => handleExport(t.name, 'sql') },
|
||||
{ key: 'rename-table', label: '重命名表', icon: <EditOutlined />, onClick: () => handleRenameTable(t.name) },
|
||||
{ key: 'drop-table', label: '删除表', icon: <DeleteOutlined />, danger: true, onClick: () => handleDeleteTable(t.name) },
|
||||
{ type: 'divider' },
|
||||
{ key: 'export', label: '导出表数据', icon: <ExportOutlined />, children: [
|
||||
{ key: 'export-csv', label: '导出 CSV', onClick: () => handleExport(t.name, 'csv') },
|
||||
{ key: 'export-xlsx', label: '导出 Excel (XLSX)', onClick: () => handleExport(t.name, 'xlsx') },
|
||||
{ key: 'export-json', label: '导出 JSON', onClick: () => handleExport(t.name, 'json') },
|
||||
{ key: 'export-md', label: '导出 Markdown', onClick: () => handleExport(t.name, 'md') },
|
||||
{ key: 'export-html', label: '导出 HTML', onClick: () => handleExport(t.name, 'html') },
|
||||
]},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<div
|
||||
onDoubleClick={() => openTable(t.name)}
|
||||
style={{
|
||||
background: cardBg,
|
||||
border: `1px solid ${cardBorder}`,
|
||||
borderRadius: 10,
|
||||
padding: '14px 16px',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.15s ease',
|
||||
userSelect: 'none',
|
||||
}}
|
||||
onMouseEnter={e => { (e.currentTarget as HTMLDivElement).style.background = cardHoverBg; (e.currentTarget as HTMLDivElement).style.borderColor = accentColor; }}
|
||||
onMouseLeave={e => { (e.currentTarget as HTMLDivElement).style.background = cardBg; (e.currentTarget as HTMLDivElement).style.borderColor = cardBorder; }}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
|
||||
<TableOutlined style={{ fontSize: 14, color: accentColor }} />
|
||||
<Tooltip title={t.name} mouseEnterDelay={0.4}>
|
||||
<span style={{ fontSize: 13, fontWeight: 600, color: textPrimary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1, display: 'block' }}>
|
||||
{t.name}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
{t.comment && (
|
||||
<Tooltip title={t.comment} mouseEnterDelay={0.4}>
|
||||
<div style={{ fontSize: 12, color: textSecondary, marginBottom: 10, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{t.comment}
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
<div style={{ display: 'flex', gap: 16, fontSize: 12, color: textMuted }}>
|
||||
<span title="行数" style={{ minWidth: 52 }}>📊 {formatRows(t.rows)}</span>
|
||||
<span title="数据大小" style={{ minWidth: 72 }}>💾 {formatSize(t.dataSize)}</span>
|
||||
{t.engine && <span title="引擎" style={{ marginLeft: 'auto', opacity: 0.7 }}>{t.engine}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</Dropdown>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableOverview;
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Editor, { loader } from '@monaco-editor/react';
|
||||
import Editor from '@monaco-editor/react';
|
||||
import { Spin, Alert } from 'antd';
|
||||
import { TabData } from '../types';
|
||||
import { useStore } from '../store';
|
||||
@@ -18,31 +18,7 @@ const TriggerViewer: React.FC<TriggerViewerProps> = ({ tab }) => {
|
||||
const theme = useStore(state => state.theme);
|
||||
const darkMode = theme === 'dark';
|
||||
|
||||
// 初始化透明 Monaco Editor 主题
|
||||
useEffect(() => {
|
||||
loader.init().then(monaco => {
|
||||
monaco.editor.defineTheme('transparent-dark', {
|
||||
base: 'vs-dark',
|
||||
inherit: true,
|
||||
rules: [],
|
||||
colors: {
|
||||
'editor.background': '#00000000',
|
||||
'editor.lineHighlightBackground': '#ffffff10',
|
||||
'editorGutter.background': '#00000000',
|
||||
}
|
||||
});
|
||||
monaco.editor.defineTheme('transparent-light', {
|
||||
base: 'vs',
|
||||
inherit: true,
|
||||
rules: [],
|
||||
colors: {
|
||||
'editor.background': '#00000000',
|
||||
'editor.lineHighlightBackground': '#00000010',
|
||||
'editorGutter.background': '#00000000',
|
||||
}
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
// 透明 Monaco Editor 主题已在 main.tsx 全局注册(含 stickyScroll 不透明背景)
|
||||
|
||||
const escapeSQLLiteral = (raw: string): string => String(raw || '').replace(/'/g, "''");
|
||||
const quoteSqlServerIdentifier = (raw: string): string => `[${String(raw || '').replace(/]/g, ']]')}]`;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { calculateTableBodyBottomPadding } from './dataGridLayout';
|
||||
import { calculateTableBodyBottomPadding, calculateVirtualTableScrollX } from './dataGridLayout';
|
||||
|
||||
const assertEqual = (actual: unknown, expected: unknown, message: string) => {
|
||||
if (actual !== expected) {
|
||||
@@ -36,4 +36,34 @@ assertEqual(
|
||||
'较粗滚动条场景下应同步放大底部安全区'
|
||||
);
|
||||
|
||||
assertEqual(
|
||||
calculateVirtualTableScrollX({
|
||||
totalWidth: 646,
|
||||
tableViewportWidth: 1200,
|
||||
isMacLike: false,
|
||||
}),
|
||||
1200,
|
||||
'列总宽小于视口时应按视口宽度返回 scroll.x,避免 header/body 走两套宽度'
|
||||
);
|
||||
|
||||
assertEqual(
|
||||
calculateVirtualTableScrollX({
|
||||
totalWidth: 646,
|
||||
tableViewportWidth: 0,
|
||||
isMacLike: false,
|
||||
}),
|
||||
646,
|
||||
'未拿到视口宽度时应退回列宽总和'
|
||||
);
|
||||
|
||||
assertEqual(
|
||||
calculateVirtualTableScrollX({
|
||||
totalWidth: 1200,
|
||||
tableViewportWidth: 800,
|
||||
isMacLike: true,
|
||||
}),
|
||||
1202,
|
||||
'macOS 横向溢出时仍需额外预留 2px 以稳定滚动轨道'
|
||||
);
|
||||
|
||||
console.log('dataGridLayout tests passed');
|
||||
|
||||
@@ -4,6 +4,12 @@ export interface TableBodyBottomPaddingOptions {
|
||||
floatingScrollbarGap: number;
|
||||
}
|
||||
|
||||
export interface VirtualTableScrollXOptions {
|
||||
totalWidth: number;
|
||||
tableViewportWidth: number;
|
||||
isMacLike: boolean;
|
||||
}
|
||||
|
||||
const MIN_SCROLLBAR_CLEARANCE = 8;
|
||||
const FLOATING_SCROLLBAR_VISUAL_EXTRA = 4;
|
||||
|
||||
@@ -21,3 +27,22 @@ export const calculateTableBodyBottomPadding = ({
|
||||
|
||||
return safeScrollbarHeight + FLOATING_SCROLLBAR_VISUAL_EXTRA + safeScrollbarGap + MIN_SCROLLBAR_CLEARANCE;
|
||||
};
|
||||
|
||||
export const calculateVirtualTableScrollX = ({
|
||||
totalWidth,
|
||||
tableViewportWidth,
|
||||
isMacLike,
|
||||
}: VirtualTableScrollXOptions): number => {
|
||||
const safeTotalWidth = Math.max(0, Math.ceil(totalWidth));
|
||||
const safeViewportWidth = Math.max(0, Math.floor(tableViewportWidth));
|
||||
|
||||
if (safeViewportWidth > 0 && safeTotalWidth < safeViewportWidth) {
|
||||
return safeViewportWidth;
|
||||
}
|
||||
|
||||
if (isMacLike && safeViewportWidth > 0 && safeTotalWidth > safeViewportWidth) {
|
||||
return safeTotalWidth + 2;
|
||||
}
|
||||
|
||||
return safeTotalWidth;
|
||||
};
|
||||
|
||||
@@ -5,6 +5,8 @@ import App from './App'
|
||||
|
||||
// 全局配置 Monaco Editor 使用本地打包的文件,避免从 CDN (jsdelivr) 加载。
|
||||
// Windows WebView2 环境下访问外部 CDN 可能失败,导致编辑器一直显示 Loading。
|
||||
// 中文语言包必须在 monaco-editor 主包之前导入,否则右键菜单等 UI 仍为英文。
|
||||
import 'monaco-editor/esm/nls.messages.zh-cn'
|
||||
import { loader } from '@monaco-editor/react'
|
||||
import * as monaco from 'monaco-editor'
|
||||
loader.config({ monaco })
|
||||
@@ -42,11 +44,11 @@ if (typeof window !== 'undefined' && !(window as any).go) {
|
||||
// 全局注册透明主题,避免每个 Editor 组件 beforeMount 中重复定义
|
||||
monaco.editor.defineTheme('transparent-dark', {
|
||||
base: 'vs-dark', inherit: true, rules: [],
|
||||
colors: { 'editor.background': '#00000000', 'editor.lineHighlightBackground': '#ffffff10', 'editorGutter.background': '#00000000' }
|
||||
colors: { 'editor.background': '#00000000', 'editor.lineHighlightBackground': '#ffffff10', 'editorGutter.background': '#00000000', 'editorStickyScroll.background': '#1e1e1e', 'editorStickyScrollHover.background': '#2a2a2a' }
|
||||
})
|
||||
monaco.editor.defineTheme('transparent-light', {
|
||||
base: 'vs', inherit: true, rules: [],
|
||||
colors: { 'editor.background': '#00000000', 'editor.lineHighlightBackground': '#00000010', 'editorGutter.background': '#00000000' }
|
||||
colors: { 'editor.background': '#00000000', 'editor.lineHighlightBackground': '#00000010', 'editorGutter.background': '#00000000', 'editorStickyScroll.background': '#ffffff', 'editorStickyScrollHover.background': '#f5f5f5' }
|
||||
})
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
|
||||
@@ -420,6 +420,9 @@ interface AppState {
|
||||
enableColumnOrderMemory: boolean;
|
||||
tableHiddenColumns: Record<string, string[]>;
|
||||
enableHiddenColumnMemory: boolean;
|
||||
windowBounds: { width: number; height: number; x: number; y: number } | null;
|
||||
windowState: 'normal' | 'fullscreen' | 'maximized';
|
||||
sidebarWidth: number;
|
||||
|
||||
addConnection: (conn: SavedConnection) => void;
|
||||
updateConnection: (conn: SavedConnection) => void;
|
||||
@@ -469,6 +472,9 @@ interface AppState {
|
||||
setTableHiddenColumns: (connectionId: string, dbName: string, tableName: string, hiddenColumns: string[]) => void;
|
||||
setEnableHiddenColumnMemory: (enabled: boolean) => void;
|
||||
clearTableHiddenColumns: (connectionId: string, dbName: string, tableName: string) => void;
|
||||
setWindowBounds: (bounds: { width: number; height: number; x: number; y: number }) => void;
|
||||
setWindowState: (state: 'normal' | 'fullscreen' | 'maximized') => void;
|
||||
setSidebarWidth: (width: number) => void;
|
||||
}
|
||||
|
||||
const sanitizeSavedQueries = (value: unknown): SavedQuery[] => {
|
||||
@@ -599,6 +605,29 @@ const sanitizeGlobalProxy = (value: unknown): GlobalProxyConfig => {
|
||||
};
|
||||
};
|
||||
|
||||
const sanitizeWindowState = (value: unknown): 'normal' | 'fullscreen' | 'maximized' => {
|
||||
if (value === 'fullscreen' || value === 'maximized') return value;
|
||||
return 'normal';
|
||||
};
|
||||
|
||||
const sanitizeSidebarWidth = (value: unknown): number => {
|
||||
const parsed = Number(value);
|
||||
if (!Number.isFinite(parsed)) return 330;
|
||||
return Math.max(200, Math.min(600, Math.trunc(parsed)));
|
||||
};
|
||||
|
||||
const sanitizeWindowBounds = (value: unknown): { width: number; height: number; x: number; y: number } | null => {
|
||||
if (!value || typeof value !== 'object') return null;
|
||||
const raw = value as Record<string, unknown>;
|
||||
const width = Number(raw.width);
|
||||
const height = Number(raw.height);
|
||||
const x = Number(raw.x);
|
||||
const y = Number(raw.y);
|
||||
if (!Number.isFinite(width) || !Number.isFinite(height) || !Number.isFinite(x) || !Number.isFinite(y)) return null;
|
||||
if (width < 400 || height < 300) return null;
|
||||
return { width: Math.trunc(width), height: Math.trunc(height), x: Math.trunc(x), y: Math.trunc(y) };
|
||||
};
|
||||
|
||||
const unwrapPersistedAppState = (persistedState: unknown): Record<string, unknown> => {
|
||||
if (!persistedState || typeof persistedState !== 'object') {
|
||||
return {};
|
||||
@@ -635,6 +664,9 @@ export const useStore = create<AppState>()(
|
||||
enableColumnOrderMemory: true,
|
||||
tableHiddenColumns: {},
|
||||
enableHiddenColumnMemory: true,
|
||||
windowBounds: null,
|
||||
windowState: 'normal' as const,
|
||||
sidebarWidth: 330,
|
||||
|
||||
addConnection: (conn) => set((state) => ({ connections: [...state.connections, conn] })),
|
||||
updateConnection: (conn) => set((state) => ({
|
||||
@@ -689,6 +721,33 @@ export const useStore = create<AppState>()(
|
||||
newTabs[index] = { ...newTabs[index], ...tab };
|
||||
return { tabs: newTabs, activeTabId: tab.id };
|
||||
}
|
||||
// 语义去重:对 table/design 类型按 connectionId+dbName+tableName 匹配已有 Tab
|
||||
if ((tab.type === 'table' || tab.type === 'design') && tab.tableName && tab.connectionId && tab.dbName) {
|
||||
const semanticIndex = state.tabs.findIndex(t =>
|
||||
t.type === tab.type &&
|
||||
t.connectionId === tab.connectionId &&
|
||||
t.dbName === tab.dbName &&
|
||||
t.tableName === tab.tableName
|
||||
);
|
||||
if (semanticIndex !== -1) {
|
||||
const existingTab = state.tabs[semanticIndex];
|
||||
const newTabs = [...state.tabs];
|
||||
newTabs[semanticIndex] = { ...existingTab, ...tab, id: existingTab.id };
|
||||
return { tabs: newTabs, activeTabId: existingTab.id };
|
||||
}
|
||||
}
|
||||
// 语义去重:对 query 类型按 savedQueryId 匹配已有 Tab(避免保存后重复打开)
|
||||
if (tab.type === 'query' && tab.savedQueryId) {
|
||||
const savedQueryIndex = state.tabs.findIndex(t =>
|
||||
t.type === 'query' && (t.savedQueryId === tab.savedQueryId || t.id === tab.savedQueryId)
|
||||
);
|
||||
if (savedQueryIndex !== -1) {
|
||||
const existingTab = state.tabs[savedQueryIndex];
|
||||
const newTabs = [...state.tabs];
|
||||
newTabs[savedQueryIndex] = { ...existingTab, ...tab, id: existingTab.id };
|
||||
return { tabs: newTabs, activeTabId: existingTab.id };
|
||||
}
|
||||
}
|
||||
return { tabs: [...state.tabs, tab], activeTabId: tab.id };
|
||||
}),
|
||||
|
||||
@@ -875,6 +934,19 @@ export const useStore = create<AppState>()(
|
||||
}),
|
||||
|
||||
setEnableHiddenColumnMemory: (enabled) => set({ enableHiddenColumnMemory: !!enabled }),
|
||||
|
||||
setWindowBounds: (bounds) => set({
|
||||
windowBounds: {
|
||||
width: Math.max(400, Math.trunc(bounds.width)),
|
||||
height: Math.max(300, Math.trunc(bounds.height)),
|
||||
x: Math.trunc(bounds.x),
|
||||
y: Math.trunc(bounds.y),
|
||||
}
|
||||
}),
|
||||
|
||||
setWindowState: (state) => set({ windowState: state }),
|
||||
|
||||
setSidebarWidth: (width) => set({ sidebarWidth: Math.max(200, Math.min(600, Math.trunc(width))) }),
|
||||
}),
|
||||
{
|
||||
name: 'lite-db-storage', // name of the item in the storage (must be unique)
|
||||
@@ -906,7 +978,10 @@ export const useStore = create<AppState>()(
|
||||
nextState.enableColumnOrderMemory = state.enableColumnOrderMemory !== false;
|
||||
const safeHidden = sanitizeTableHiddenColumns(state.tableHiddenColumns);
|
||||
nextState.tableHiddenColumns = safeHidden;
|
||||
nextState.enableHiddenColumnMemory = state.enableHiddenColumnMemory !== false;
|
||||
nextState.enableHiddenColumnMemory = state.enableHiddenColumnMemory !== false;
|
||||
nextState.windowBounds = sanitizeWindowBounds(state.windowBounds);
|
||||
nextState.windowState = sanitizeWindowState(state.windowState);
|
||||
nextState.sidebarWidth = sanitizeSidebarWidth(state.sidebarWidth);
|
||||
return nextState as AppState;
|
||||
},
|
||||
merge: (persistedState, currentState) => {
|
||||
@@ -928,6 +1003,9 @@ export const useStore = create<AppState>()(
|
||||
enableColumnOrderMemory: state.enableColumnOrderMemory !== false,
|
||||
tableHiddenColumns: sanitizeTableHiddenColumns(state.tableHiddenColumns),
|
||||
enableHiddenColumnMemory: state.enableHiddenColumnMemory !== false,
|
||||
windowBounds: sanitizeWindowBounds(state.windowBounds),
|
||||
windowState: sanitizeWindowState(state.windowState),
|
||||
sidebarWidth: sanitizeSidebarWidth(state.sidebarWidth),
|
||||
|
||||
sqlFormatOptions: sanitizeSqlFormatOptions(state.sqlFormatOptions),
|
||||
queryOptions: sanitizeQueryOptions(state.queryOptions),
|
||||
@@ -953,7 +1031,10 @@ export const useStore = create<AppState>()(
|
||||
tableColumnOrders: state.tableColumnOrders,
|
||||
enableColumnOrderMemory: state.enableColumnOrderMemory,
|
||||
tableHiddenColumns: state.tableHiddenColumns,
|
||||
enableHiddenColumnMemory: state.enableHiddenColumnMemory
|
||||
enableHiddenColumnMemory: state.enableHiddenColumnMemory,
|
||||
windowBounds: state.windowBounds,
|
||||
windowState: state.windowState,
|
||||
sidebarWidth: state.sidebarWidth,
|
||||
}), // Don't persist logs
|
||||
}
|
||||
)
|
||||
|
||||
@@ -72,6 +72,8 @@ export interface SavedConnection {
|
||||
config: ConnectionConfig;
|
||||
includeDatabases?: string[];
|
||||
includeRedisDatabases?: number[]; // Redis databases to show (0-15)
|
||||
iconType?: string; // 自定义图标类型(如 'mysql','postgres'),不填则取 config.type
|
||||
iconColor?: string; // 自定义图标颜色(十六进制),不填则取类型默认色
|
||||
}
|
||||
|
||||
export interface ConnectionTag {
|
||||
@@ -116,7 +118,7 @@ export interface TriggerDefinition {
|
||||
export interface TabData {
|
||||
id: string;
|
||||
title: string;
|
||||
type: 'query' | 'table' | 'design' | 'redis-keys' | 'redis-command' | 'trigger' | 'view-def' | 'routine-def';
|
||||
type: 'query' | 'table' | 'design' | 'redis-keys' | 'redis-command' | 'trigger' | 'view-def' | 'routine-def' | 'table-overview';
|
||||
connectionId: string;
|
||||
dbName?: string;
|
||||
tableName?: string;
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
import type { FilterCondition } from './sql';
|
||||
import { parseListValues } from './sql';
|
||||
|
||||
type SortInfo = {
|
||||
type SortInfoItem = {
|
||||
columnKey?: string;
|
||||
order?: string;
|
||||
} | null | undefined;
|
||||
enabled?: boolean;
|
||||
};
|
||||
|
||||
type SortInfo = SortInfoItem | SortInfoItem[] | null | undefined;
|
||||
|
||||
type ShellConvertResult = {
|
||||
recognized: boolean;
|
||||
@@ -607,14 +610,24 @@ export const buildMongoSort = (
|
||||
sortInfo: SortInfo,
|
||||
fallbackColumns: string[] = [],
|
||||
): Record<string, 1 | -1> | undefined => {
|
||||
const sortColumn = String(sortInfo?.columnKey || '').trim();
|
||||
const sortOrder = String(sortInfo?.order || '');
|
||||
if (sortColumn && (sortOrder === 'ascend' || sortOrder === 'descend')) {
|
||||
return { [sortColumn]: sortOrder === 'ascend' ? 1 : -1 };
|
||||
const items = Array.isArray(sortInfo) ? sortInfo : (sortInfo ? [sortInfo] : []);
|
||||
const sort: Record<string, 1 | -1> = {};
|
||||
const seen = new Set<string>();
|
||||
for (const item of items) {
|
||||
if (item?.enabled === false) continue;
|
||||
const col = String(item?.columnKey || '').trim();
|
||||
const order = String(item?.order || '');
|
||||
if (col && (order === 'ascend' || order === 'descend')) {
|
||||
const key = col.toLowerCase();
|
||||
if (!seen.has(key)) {
|
||||
seen.add(key);
|
||||
sort[col] = order === 'ascend' ? 1 : -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (Object.keys(sort).length > 0) return sort;
|
||||
|
||||
const uniqueColumns: string[] = [];
|
||||
const seen = new Set<string>();
|
||||
(fallbackColumns || []).forEach((col) => {
|
||||
const key = String(col || '').trim();
|
||||
if (!key) return;
|
||||
@@ -625,7 +638,6 @@ export const buildMongoSort = (
|
||||
});
|
||||
if (uniqueColumns.length === 0) return undefined;
|
||||
|
||||
const sort: Record<string, 1 | -1> = {};
|
||||
uniqueColumns.forEach((col) => {
|
||||
sort[col] = 1;
|
||||
});
|
||||
|
||||
@@ -69,10 +69,13 @@ export const quoteQualifiedIdent = (dbType: string, ident: string) => {
|
||||
|
||||
export const escapeLiteral = (val: string) => (val || '').replace(/'/g, "''");
|
||||
|
||||
type SortInfo = {
|
||||
type SortInfoItem = {
|
||||
columnKey?: string;
|
||||
order?: string;
|
||||
} | null | undefined;
|
||||
enabled?: boolean;
|
||||
};
|
||||
|
||||
type SortInfo = SortInfoItem | SortInfoItem[] | null | undefined;
|
||||
|
||||
// 为排序查询按库类型注入 sort_buffer 提升参数(仅影响当前语句)。
|
||||
// MySQL: 使用 Optimizer Hint `SET_VAR`。
|
||||
@@ -101,17 +104,50 @@ export const withSortBufferTuningSQL = (
|
||||
return rawSql;
|
||||
};
|
||||
|
||||
/** 将 SortInfo(单字段或多字段)标准化为 SortInfoItem 数组 */
|
||||
const normalizeSortInfoItems = (sortInfo: SortInfo): SortInfoItem[] => {
|
||||
if (!sortInfo) return [];
|
||||
if (Array.isArray(sortInfo)) return sortInfo;
|
||||
return [sortInfo];
|
||||
};
|
||||
|
||||
/** 判断 SortInfo 中是否存在至少一个有效排序 */
|
||||
export const hasExplicitSort = (sortInfo: SortInfo): boolean => {
|
||||
const items = normalizeSortInfoItems(sortInfo);
|
||||
return items.some(item => {
|
||||
if (item?.enabled === false) return false;
|
||||
const col = String(item?.columnKey || '').trim();
|
||||
const order = String(item?.order || '');
|
||||
return !!col && (order === 'ascend' || order === 'descend');
|
||||
});
|
||||
};
|
||||
|
||||
export const buildOrderBySQL = (
|
||||
dbType: string,
|
||||
sortInfo: SortInfo,
|
||||
fallbackColumns: string[] = [],
|
||||
) => {
|
||||
const dbTypeLower = String(dbType || '').trim().toLowerCase();
|
||||
const sortColumn = normalizeIdentPart(String(sortInfo?.columnKey || ''));
|
||||
const sortOrder = String(sortInfo?.order || '');
|
||||
const direction = sortOrder === 'ascend' ? 'ASC' : sortOrder === 'descend' ? 'DESC' : '';
|
||||
if (sortColumn && direction) {
|
||||
return ` ORDER BY ${quoteIdentPart(dbType, sortColumn)} ${direction}`;
|
||||
const items = normalizeSortInfoItems(sortInfo);
|
||||
const seen = new Set<string>();
|
||||
const sortParts: string[] = [];
|
||||
|
||||
for (const item of items) {
|
||||
if (item?.enabled === false) continue;
|
||||
const sortColumn = normalizeIdentPart(String(item?.columnKey || ''));
|
||||
const sortOrder = String(item?.order || '');
|
||||
const direction = sortOrder === 'ascend' ? 'ASC' : sortOrder === 'descend' ? 'DESC' : '';
|
||||
if (sortColumn && direction) {
|
||||
const key = sortColumn.toLowerCase();
|
||||
if (!seen.has(key)) {
|
||||
seen.add(key);
|
||||
sortParts.push(`${quoteIdentPart(dbType, sortColumn)} ${direction}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (sortParts.length > 0) {
|
||||
return ` ORDER BY ${sortParts.join(', ')}`;
|
||||
}
|
||||
|
||||
// MySQL/MariaDB 大表在无显式排序需求时强制 ORDER BY(即使按主键)可能触发 filesort,
|
||||
@@ -121,7 +157,6 @@ export const buildOrderBySQL = (
|
||||
return '';
|
||||
}
|
||||
|
||||
const seen = new Set<string>();
|
||||
const stableColumns = (fallbackColumns || [])
|
||||
.map((col) => normalizeIdentPart(String(col || '')))
|
||||
.filter((col) => {
|
||||
|
||||
@@ -109,6 +109,8 @@ func (a *App) CreateDatabase(config connection.ConnectionConfig, dbName string)
|
||||
// MariaDB uses same syntax as MySQL
|
||||
} else if dbType == "sphinx" {
|
||||
return connection.QueryResult{Success: false, Message: "Sphinx 暂不支持创建数据库"}
|
||||
} else if dbType == "oracle" || dbType == "dameng" {
|
||||
return connection.QueryResult{Success: false, Message: fmt.Sprintf("当前数据源(%s)的「数据库」实际为用户/Schema,暂不支持通过此入口创建,请使用 SQL 编辑器执行 CREATE USER 语句", dbType)}
|
||||
}
|
||||
|
||||
_, err = dbInst.Exec(query)
|
||||
@@ -523,8 +525,22 @@ func (a *App) DBQueryMulti(config connection.ConnectionConfig, dbName string, qu
|
||||
a.queryMu.Unlock()
|
||||
}()
|
||||
|
||||
// 尝试使用驱动原生多结果集支持
|
||||
// 尝试使用驱动原生多结果集支持。
|
||||
// 注意:原生 conn.Query() 执行写操作(UPDATE/INSERT/DELETE)时,
|
||||
// sql.Rows 不暴露 RowsAffected,导致影响行数丢失。
|
||||
// 因此仅在全部语句皆为读操作时才使用原生路径。
|
||||
allReadOnly := true
|
||||
for _, stmt := range splitSQLStatements(query) {
|
||||
if strings.TrimSpace(stmt) != "" && !isReadOnlySQLQuery(runConfig.Type, stmt) {
|
||||
allReadOnly = false
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
runMultiQuery := func(inst db.Database) ([]connection.ResultSetData, error) {
|
||||
if !allReadOnly {
|
||||
return nil, nil // 包含写操作,走逐条执行路径
|
||||
}
|
||||
if q, ok := inst.(db.MultiResultQuerierContext); ok {
|
||||
return q.QueryMultiContext(ctx, query)
|
||||
}
|
||||
|
||||
@@ -2207,7 +2207,12 @@ func formatExportCellText(val interface{}) string {
|
||||
}
|
||||
return text
|
||||
default:
|
||||
return fmt.Sprintf("%v", val)
|
||||
text := fmt.Sprintf("%v", val)
|
||||
// 字符串型日期时间值(如 RFC3339 "2026-03-10T17:01:55+08:00")格式化为本地时区 yyyy-MM-dd HH:mm:ss
|
||||
if parsed, ok := parseTemporalString(text); ok {
|
||||
return parsed.Local().Format("2006-01-02 15:04:05")
|
||||
}
|
||||
return text
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2217,6 +2222,18 @@ func normalizeExportJSONValue(val interface{}) interface{} {
|
||||
}
|
||||
|
||||
switch v := val.(type) {
|
||||
case time.Time:
|
||||
return v.Local().Format("2006-01-02 15:04:05")
|
||||
case *time.Time:
|
||||
if v == nil {
|
||||
return nil
|
||||
}
|
||||
return v.Local().Format("2006-01-02 15:04:05")
|
||||
case string:
|
||||
if parsed, ok := parseTemporalString(v); ok {
|
||||
return parsed.Local().Format("2006-01-02 15:04:05")
|
||||
}
|
||||
return v
|
||||
case float32:
|
||||
f := float64(v)
|
||||
if math.IsNaN(f) || math.IsInf(f, 0) {
|
||||
|
||||
@@ -957,8 +957,25 @@ if %ERRORLEVEL%==0 (
|
||||
)
|
||||
call :log host process exited
|
||||
|
||||
rem -- Win10 needs extra time for kernel to release exe file handles --
|
||||
timeout /t 3 /nobreak >nul
|
||||
call :log cooldown finished, starting file replace
|
||||
|
||||
set /a RETRY=0
|
||||
:move_retry
|
||||
call :log attempt !RETRY!: trying rename-then-copy strategy
|
||||
ren "%TARGET%" "%TARGET_NAME%.old" >> "%LOG_FILE%" 2>&1
|
||||
if %ERRORLEVEL%==0 (
|
||||
copy /Y "%SOURCE_EXE%" "%TARGET%" >> "%LOG_FILE%" 2>&1
|
||||
if !ERRORLEVEL!==0 (
|
||||
del /F /Q "%TARGET%.old" >> "%LOG_FILE%" 2>&1
|
||||
goto move_done
|
||||
)
|
||||
call :log copy after rename failed, restoring old file
|
||||
ren "%TARGET_NAME%.old" "%TARGET_NAME%" >> "%LOG_FILE%" 2>&1
|
||||
)
|
||||
|
||||
call :log rename strategy failed, trying direct move
|
||||
move /Y "%SOURCE_EXE%" "%TARGET%" >> "%LOG_FILE%" 2>&1
|
||||
if %ERRORLEVEL%==0 goto move_done
|
||||
|
||||
@@ -966,8 +983,13 @@ copy /Y "%SOURCE_EXE%" "%TARGET%" >> "%LOG_FILE%" 2>&1
|
||||
if %ERRORLEVEL%==0 goto move_done
|
||||
|
||||
set /a RETRY+=1
|
||||
if !RETRY! LSS 20 (
|
||||
timeout /t 1 /nobreak >nul
|
||||
if !RETRY! LSS 15 (
|
||||
set /a WAIT=1
|
||||
if !RETRY! GEQ 3 set /a WAIT=2
|
||||
if !RETRY! GEQ 6 set /a WAIT=3
|
||||
if !RETRY! GEQ 9 set /a WAIT=5
|
||||
call :log waiting !WAIT! seconds before retry
|
||||
timeout /t !WAIT! /nobreak >nul
|
||||
goto move_retry
|
||||
)
|
||||
|
||||
@@ -975,6 +997,7 @@ call :log replace failed after retries (portable mode, no elevation): check dire
|
||||
exit /b 1
|
||||
|
||||
:move_done
|
||||
del /F /Q "%TARGET%.old" >> "%LOG_FILE%" 2>&1
|
||||
start "" "%TARGET%" >> "%LOG_FILE%" 2>&1
|
||||
if %ERRORLEVEL% NEQ 0 (
|
||||
call :log cmd start failed, trying powershell Start-Process
|
||||
|
||||
@@ -38,3 +38,37 @@ func TestBuildWindowsScriptKeepsBatchForSyntax(t *testing.T) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
func TestBuildWindowsScriptWin10Fixes(t *testing.T) {
|
||||
script := buildWindowsScript(
|
||||
`C:\tmp\GoNavi-v0.5.0-windows-amd64.exe`,
|
||||
`C:\Program Files\GoNavi\GoNavi.exe`,
|
||||
`C:\Program Files\GoNavi\.gonavi-update-windows-v0.5.0`,
|
||||
`C:\Program Files\GoNavi\logs\update-install.log`,
|
||||
99999,
|
||||
)
|
||||
|
||||
// 验证 Win10 关键修复点
|
||||
win10Fixes := []struct {
|
||||
desc string
|
||||
token string
|
||||
}{
|
||||
{"cooldown after process exit", `timeout /t 3 /nobreak >nul`},
|
||||
{"cooldown log", `call :log cooldown finished, starting file replace`},
|
||||
{"rename-before-replace strategy", `ren "%TARGET%" "%TARGET_NAME%.old"`},
|
||||
{"copy after rename", `copy /Y "%SOURCE_EXE%" "%TARGET%"`},
|
||||
{"restore on copy failure", `ren "%TARGET_NAME%.old" "%TARGET_NAME%"`},
|
||||
{"direct move fallback", `call :log rename strategy failed, trying direct move`},
|
||||
{"exponential backoff tier 1", `if !RETRY! GEQ 3 set /a WAIT=2`},
|
||||
{"exponential backoff tier 2", `if !RETRY! GEQ 6 set /a WAIT=3`},
|
||||
{"exponential backoff tier 3", `if !RETRY! GEQ 9 set /a WAIT=5`},
|
||||
{"retry limit 15", `if !RETRY! LSS 15`},
|
||||
{"cleanup old file", `del /F /Q "%TARGET%.old"`},
|
||||
}
|
||||
for _, fix := range win10Fixes {
|
||||
if !strings.Contains(script, fix.token) {
|
||||
t.Errorf("Win10 fix missing [%s]: expected token: %s", fix.desc, fix.token)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -4,9 +4,15 @@ import (
|
||||
"fmt"
|
||||
"sort"
|
||||
"strings"
|
||||
|
||||
"GoNavi-Wails/internal/logger"
|
||||
)
|
||||
|
||||
var damengDatabaseQueries = []string{
|
||||
// 优先使用达梦原生系统表
|
||||
"SELECT DISTINCT OBJECT_NAME AS DATABASE_NAME FROM SYS.SYSOBJECTS WHERE TYPE$ = 'SCH' AND OBJECT_NAME NOT IN ('SYS','SYSDBA','SYSAUDITOR','SYSSSO','CTISYS','__RECYCLE_USER__') ORDER BY OBJECT_NAME",
|
||||
"SELECT SCHEMA_NAME AS DATABASE_NAME FROM INFORMATION_SCHEMA.SCHEMATA WHERE SCHEMA_NAME NOT IN ('SYS','SYSDBA','SYSAUDITOR','SYSSSO','CTISYS','INFORMATION_SCHEMA') ORDER BY SCHEMA_NAME",
|
||||
// Oracle 兼容层
|
||||
"SELECT SYS_CONTEXT('USERENV', 'CURRENT_SCHEMA') AS DATABASE_NAME FROM DUAL",
|
||||
"SELECT SYS_CONTEXT('USERENV', 'CURRENT_USER') AS DATABASE_NAME FROM DUAL",
|
||||
"SELECT USERNAME AS DATABASE_NAME FROM USER_USERS",
|
||||
@@ -24,12 +30,14 @@ func collectDamengDatabaseNames(query damengQueryFunc) ([]string, error) {
|
||||
dbs := make([]string, 0, 64)
|
||||
var lastErr error
|
||||
|
||||
for _, q := range damengDatabaseQueries {
|
||||
for idx, q := range damengDatabaseQueries {
|
||||
data, _, err := query(q)
|
||||
if err != nil {
|
||||
logger.Warnf("达梦 GetDatabases 查询[%d]失败:%v(SQL: %.80s…)", idx, err, q)
|
||||
lastErr = err
|
||||
continue
|
||||
}
|
||||
newCount := 0
|
||||
for _, row := range data {
|
||||
name := getDamengRowString(row,
|
||||
"DATABASE_NAME",
|
||||
@@ -58,10 +66,14 @@ func collectDamengDatabaseNames(query damengQueryFunc) ([]string, error) {
|
||||
}
|
||||
seen[key] = struct{}{}
|
||||
dbs = append(dbs, name)
|
||||
newCount++
|
||||
}
|
||||
logger.Infof("达梦 GetDatabases 查询[%d]成功:返回 %d 行,新增 %d 条(SQL: %.80s…)", idx, len(data), newCount, q)
|
||||
}
|
||||
|
||||
logger.Infof("达梦 GetDatabases 最终结果:共 %d 条数据库/schema", len(dbs))
|
||||
if len(dbs) == 0 && lastErr != nil {
|
||||
logger.Warnf("达梦 GetDatabases 所有查询均失败,返回最后错误:%v", lastErr)
|
||||
return nil, lastErr
|
||||
}
|
||||
|
||||
|
||||