@@ -71,7 +71,7 @@ import ToolService from '../services/ToolService'
export default {
name: 'HomePage',
components: { Page },
-
+
data() {
return {
loading: false,
@@ -79,11 +79,11 @@ export default {
viewMode: 'colorful' // 'colorful' 或 'simple'
}
},
-
+
created() {
this.loadData()
},
-
+
methods: {
/**
* 加载数据(分类和工具)
@@ -91,13 +91,13 @@ export default {
async loadData() {
try {
this.loading = true
-
+
// 并发加载分类和工具
const [categoriesRes, toolsRes] = await Promise.all([
ToolService.getCategories(),
ToolService.getTools()
])
-
+
if (categoriesRes && categoriesRes.code === 200 && toolsRes && toolsRes.code === 200) {
// 处理分类数据
const categories = (categoriesRes.rows || []).map(cat => ({
@@ -107,7 +107,7 @@ export default {
sortOrder: cat.sortOrder || 0,
tools: []
}))
-
+
// 处理工具数据
const tools = (toolsRes.rows || []).map(tool => ({
id: tool.id,
@@ -119,7 +119,7 @@ export default {
icon: tool.icon,
color: tool.color
}))
-
+
// 将工具分配到对应的分类
tools.forEach(tool => {
const category = categories.find(cat => cat.id === tool.categoryId)
@@ -127,10 +127,10 @@ export default {
category.tools.push(tool)
}
})
-
+
// 按 sortOrder 排序
categories.sort((a, b) => a.sortOrder - b.sortOrder)
-
+
this.categories = categories
} else {
console.error('加载数据失败')
@@ -149,30 +149,30 @@ export default {
*/
loadDefaultData() {
this.categories = [
- {
- key: 'doc',
- title: '智聪科技',
- tools: this.getDefaultDocTools()
+ {
+ key: 'doc',
+ title: '智聪科技',
+ tools: this.getDefaultDocTools()
},
- {
- key: 'code',
- title: '管理工具',
- tools: this.getDefaultCodeTools()
+ {
+ key: 'code',
+ title: '管理工具',
+ tools: this.getDefaultCodeTools()
},
- {
- key: 'database',
- title: '开发工具',
- tools: this.getDefaultDatabaseTools()
+ {
+ key: 'database',
+ title: '开发工具',
+ tools: this.getDefaultDatabaseTools()
},
- {
- key: 'test',
- title: '第三方服务',
- tools: this.getDefaultTestTools()
+ {
+ key: 'test',
+ title: '第三方服务',
+ tools: this.getDefaultTestTools()
},
- {
- key: 'other',
- title: '其他工具',
- tools: this.getDefaultOtherTools()
+ {
+ key: 'other',
+ title: '其他工具',
+ tools: this.getDefaultOtherTools()
}
]
},
@@ -249,7 +249,7 @@ export default {
goManage() {
this.$router.push('/manage')
},
-
+
// 切换视图模式
toggleView() {
this.viewMode = this.viewMode === 'colorful' ? 'simple' : 'colorful'
@@ -304,7 +304,7 @@ export default {
padding: @spacing-md 40px;
background: @primary-gradient;
z-index: 99;
-
+
h1 {
font-size: 36px;
font-weight: 800;
@@ -313,7 +313,7 @@ export default {
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
letter-spacing: 2px;
position: relative;
-
+
// 发光效果
&::before {
content: attr(data-text);
@@ -332,7 +332,7 @@ export default {
display: flex;
gap: 12px;
align-items: center;
-
+
.view-toggle-btn {
padding: 12px 28px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@@ -344,19 +344,19 @@ export default {
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
-
+
&:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}
-
+
&:active {
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}
}
-
+
.manage-btn {
padding: 12px 28px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@@ -369,7 +369,7 @@ export default {
transition: all 0.3s ease;
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
position: relative;
-
+
// 齿轮图标
&::after {
content: '⚙️';
@@ -378,17 +378,17 @@ export default {
display: inline-block;
transition: transform 0.5s ease;
}
-
+
&:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
-
+
&::after {
transform: rotate(180deg);
}
}
-
+
&:active {
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
@@ -407,7 +407,7 @@ export default {
.tool-category { flex: 0 1 auto;
overflow: visible;
-
+
.category-title {
font-size: 20px;
font-weight: 600;
@@ -417,7 +417,7 @@ export default {
border-left: 4px solid rgba(255, 255, 255, 0.8);
line-height: 1.5;
}
-
+
.category-items {
display: flex;
flex-wrap: wrap;
@@ -436,7 +436,7 @@ export default {
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
width: @card-width;
-
+
&:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
@@ -459,7 +459,7 @@ export default {
backdrop-filter: blur(10px);
position: relative;
z-index: 1;
-
+
.simple-tool-name {
font-size: 15px;
font-weight: 600;
@@ -467,14 +467,14 @@ export default {
white-space: nowrap;
letter-spacing: 0.3px;
position: relative;
-
+
// 文字渐变效果
background: linear-gradient(135deg, #333 0%, #555 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
-
+
// 悬浮提示框
.simple-tool-tooltip {
position: absolute;
@@ -486,7 +486,7 @@ export default {
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);
@@ -496,7 +496,7 @@ export default {
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: '';
@@ -508,7 +508,7 @@ export default {
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;
@@ -516,7 +516,7 @@ export default {
line-height: 1.4;
color: #333;
}
-
+
.tooltip-url {
font-size: 12px;
margin: 0;
@@ -526,28 +526,28 @@ export default {
}
}
}
-
+
&: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%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
-
+
.simple-tool-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
}
-
+
&:active {
transform: translateY(-1px) scale(1.01);
box-shadow: 0 3px 12px rgba(102, 126, 234, 0.2);
@@ -564,7 +564,7 @@ export default {
flex-shrink: 0;
margin-right: 16px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-
+
.icon-text {
font-size: 24px;
font-weight: bold;
@@ -606,26 +606,26 @@ export default {
.tools-container {
gap: 25px @spacing-lg;
}
-
+
.tool-category {
flex-direction: column;
width: 100%;
-
+
.category-title {
width: auto;
text-align: left;
padding: 10px 12px;
}
-
+
.category-items {
width: 100%;
}
}
-
+
.tool-card {
width: calc(50% - 8px);
}
-
+
.workbench-header h1 {
font-size: 36px;
}
@@ -638,19 +638,19 @@ export default {
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-
+
.manage-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
-
+
h3 {
margin: 0;
font-size: 20px;
color: @text-primary;
}
-
+
.add-btn {
padding: 8px 16px;
background: #67c23a;
@@ -660,18 +660,18 @@ export default {
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
-
+
&:hover {
background: #85ce61;
}
}
}
-
+
.category-list {
display: flex;
flex-direction: column;
gap: 10px;
-
+
.category-item {
display: flex;
justify-content: space-between;
@@ -679,17 +679,17 @@ export default {
padding: 12px 16px;
background: #f5f7fa;
border-radius: 8px;
-
+
.category-name {
font-size: 16px;
color: @text-primary;
font-weight: 500;
}
-
+
.category-actions {
display: flex;
gap: 8px;
-
+
button {
padding: 6px 12px;
border-radius: 4px;
@@ -697,22 +697,22 @@ export default {
cursor: pointer;
transition: all 0.2s ease;
}
-
+
.edit-btn {
background: #409eff;
border: none;
color: white;
-
+
&:hover {
background: #66b1ff;
}
}
-
+
.delete-btn {
background: #f56c6c;
border: none;
color: white;
-
+
&:hover {
background: #f78989;
}
@@ -734,7 +734,7 @@ export default {
align-items: center;
justify-content: center;
z-index: 2000;
-
+
.dialog {
background: white;
border-radius: @border-radius-lg;
@@ -742,16 +742,16 @@ export default {
width: 90%;
max-width: 500px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-
+
h3 {
margin: 0 0 20px;
font-size: 20px;
color: @text-primary;
}
-
+
.form-group {
margin-bottom: 16px;
-
+
label {
display: block;
margin-bottom: 8px;
@@ -759,7 +759,7 @@ export default {
color: @text-secondary;
font-weight: 500;
}
-
+
input, select {
width: 100%;
padding: 10px 12px;
@@ -768,30 +768,30 @@ export default {
font-size: 14px;
box-sizing: border-box;
transition: border-color 0.2s ease;
-
+
&:focus {
outline: none;
border-color: #409eff;
}
-
+
&:disabled {
background: #f5f7fa;
color: #999;
cursor: not-allowed;
}
}
-
+
select {
cursor: pointer;
}
}
-
+
.dialog-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 24px;
-
+
button {
padding: 10px 24px;
border-radius: 6px;
@@ -799,23 +799,23 @@ export default {
cursor: pointer;
transition: all 0.2s ease;
}
-
+
.cancel-btn {
background: white;
border: 1px solid #dcdfe6;
color: @text-primary;
-
+
&:hover {
color: #409eff;
border-color: #409eff;
}
}
-
+
.confirm-btn {
background: #409eff;
border: none;
color: white;
-
+
&:hover {
background: #66b1ff;
}
@@ -829,62 +829,62 @@ export default {
.workbench-container {
padding: @spacing-lg @spacing-sm;
}
-
+
.workbench-header {
justify-content: flex-start;
padding: @spacing-md 20px;
-
+
h1 {
font-size: 24px;
}
-
+
.header-actions {
right: 20px;
-
+
// 手机端隐藏切换按钮,只保留管理数据按钮
.view-toggle-btn {
display: none;
}
}
}
-
+
.tools-container {
gap: @spacing-md;
}
-
+
.tool-category {
.category-title {
font-size: 16px;
padding: 8px 10px;
}
}
-
+
.tool-card {
padding: 14px;
width: 100%;
}
-
+
.tool-card-simple {
// 手机端禁用提示框
.simple-tool-tooltip {
display: none !important;
}
}
-
+
.tool-icon {
width: 50px;
height: 50px;
margin-right: 12px;
-
+
.icon-text {
font-size: 20px;
}
}
-
+
.tool-name {
font-size: 16px;
}
-
+
.tool-desc {
font-size: 12px;
}
diff --git a/src/views/ManagePage.vue b/src/views/ManagePage.vue
index a9c3659..64e01b0 100644
--- a/src/views/ManagePage.vue
+++ b/src/views/ManagePage.vue
@@ -1,7 +1,7 @@
@@ -9,8 +9,8 @@