diff --git a/index.html b/index.html index 6e04b41..661bc7e 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,9 @@ - + + content="工作台"/> @@ -12,7 +12,7 @@ - 智聪工作台 + 工作台
diff --git a/package-lock.json b/package-lock.json index c5f4ee9..3560a27 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "axios": "^0.27.2", "jsonp": "^0.2.1", + "sortablejs": "^1.15.6", "vue": "^2.7.15", "vue-carousel": "^0.18.0", "vue-router": "^3.0.1", @@ -13130,6 +13131,11 @@ "node": ">=0.10.0" } }, + "node_modules/sortablejs": { + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.6.tgz", + "integrity": "sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==" + }, "node_modules/source-list-map": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz", @@ -26431,6 +26437,11 @@ "is-plain-obj": "^1.0.0" } }, + "sortablejs": { + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.6.tgz", + "integrity": "sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==" + }, "source-list-map": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz", diff --git a/package.json b/package.json index 04c1a63..6cb32b8 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "dependencies": { "axios": "^0.27.2", "jsonp": "^0.2.1", + "sortablejs": "^1.15.6", "vue": "^2.7.15", "vue-carousel": "^0.18.0", "vue-router": "^3.0.1", diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue index e63aa4c..af0f498 100644 --- a/src/views/HomePage.vue +++ b/src/views/HomePage.vue @@ -64,7 +64,12 @@ @click="openTool(tool.url)" > {{ tool.name }} - +
+
+

{{ tool.desc }}

+

{{ tool.url }}

+
+
@@ -87,7 +92,7 @@ export default { superCategories: [], categories: [], activeSuperCategoryId: null, // 当前Tab的大分类ID - viewMode: 'colorful' // 'colorful' 或 'simple' + viewMode: 'simple' // 'colorful' 或 'simple' } }, @@ -345,7 +350,7 @@ export default { } .workbench-container { - max-width: 1920px; + max-width: 1820px; margin: 0 auto; padding: @spacing-md; padding-top: 89px; // 为固定的 Tab 区域预留空间 (76px标题栏 + 20px上边距 + 40px Tab高度) @@ -601,6 +606,7 @@ export default { border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); position: relative; + z-index: 1; .simple-tool-name { font-size: 15px; @@ -608,6 +614,7 @@ export default { color: @text-primary; white-space: nowrap; letter-spacing: 0.3px; + position: relative; // 文字渐变效果 background: linear-gradient(135deg, #333 0%, #555 100%); @@ -616,11 +623,64 @@ export default { background-clip: text; } + // 悬浮提示框 + .simple-tool-tooltip { + position: absolute; + bottom: calc(100% + 10px); + left: 50%; + transform: translateX(-50%) translateY(5px); + opacity: 0; + visibility: hidden; + transition: all 0.15s ease-out; + pointer-events: none; + z-index: 1001; + + .tooltip-content { + background: rgba(255, 255, 255, 0.98); + backdrop-filter: blur(10px); + color: @text-primary; + padding: 4px 8px; + border-radius: 8px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(102, 126, 234, 0.2); + white-space: nowrap; + position: relative; + + // 小三角 + &::after { + content: ''; + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + border: 6px solid transparent; + border-top-color: rgba(255, 255, 255, 0.98); + filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); + } + + .tooltip-desc { + font-size: 14px; + font-weight: 600; + margin: 0 0 4px; + line-height: 1.4; + color: #333; + } + + .tooltip-url { + font-size: 12px; + margin: 0; + font-family: 'Consolas', 'Monaco', monospace; + color: #667eea; + font-weight: 500; + } + } + } + &:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.25); background: white; border-color: rgba(102, 126, 234, 0.3); + z-index: 999; .simple-tool-name { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); @@ -628,6 +688,12 @@ export default { -webkit-text-fill-color: transparent; background-clip: text; } + + .simple-tool-tooltip { + opacity: 1; + visibility: visible; + transform: translateX(-50%) translateY(0); + } } &:active { @@ -968,7 +1034,10 @@ export default { } .tool-card-simple { - // 手机端已移除提示框 + // 手机端禁用提示框 + .simple-tool-tooltip { + display: none !important; + } } .tool-icon { diff --git a/src/views/ManagePage.vue b/src/views/ManagePage.vue index 5211ed8..16a0b3a 100644 --- a/src/views/ManagePage.vue +++ b/src/views/ManagePage.vue @@ -219,6 +219,7 @@