qdintc/intc-workbenches
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:分类改成书签分组。

Browse Source
This commit is contained in:
tianyongbao
2025-12-13 09:38:43 +08:00
parent fc6bbf099e
commit 667b06da37
2 changed files with 231 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
src/views/HomePage.vue
View File

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

244
src/views/ManagePage.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<page class="manage-page"> <page class="manage-page">
<div class="manage-header"> <div class="manage-header">
<h1>管理数据</h1> <h1>书签管理</h1>
<button class="back-btn" @click="goBack">返回工作台</button> <button class="back-btn" @click="goBack">返回工作台</button>
</div> </div>
@@ -9,8 +9,8 @@
<!-- 分类管理 --> <!-- 分类管理 -->
<div class="manage-section"> <div class="manage-section">
<div class="section-header"> <div class="section-header">
<h2>分类管理</h2> <h2>书签分组管理</h2>
<button class="add-btn" @click="showAddCategoryDialog">+ 添加分类</button> <button class="add-btn" @click="showAddCategoryDialog">+ 添加书签分组</button>
</div> </div>
<div class="category-list"> <div class="category-list">
<div v-for="category in categories" :key="category.id" class="category-item"> <div v-for="category in categories" :key="category.id" class="category-item">
@@ -68,14 +68,14 @@
<!-- 分类编辑对话框 --> <!-- 分类编辑对话框 -->
<div v-if="showCategoryDialog" class="dialog-overlay" @click="closeCategoryDialog"> <div v-if="showCategoryDialog" class="dialog-overlay" @click="closeCategoryDialog">
<div class="dialog" @click.stop> <div class="dialog" @click.stop>
<h3>{{ categoryForm.id ? '编辑分类' : '添加分类' }}</h3> <h3>{{ categoryForm.id ? '编辑书签分组' : '添加书签分组' }}</h3>
<div class="form-group"> <div class="form-group">
<label><span class="required">*</span>分类标识：</label> <label><span class="required">*</span>书签分组标识：</label>
<input v-model="categoryForm.key" placeholder="例如：doc" :disabled="!!categoryForm.id" /> <input v-model="categoryForm.key" placeholder="例如：doc" :disabled="!!categoryForm.id" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label><span class="required">*</span>分类名称：</label> <label><span class="required">*</span>书签分组名称：</label>
<input v-model="categoryForm.title" placeholder="例如：智聪科技" /> <input v-model="categoryForm.title" placeholder="例如：书签1" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label>排序序号：</label> <label>排序序号：</label>
@@ -94,21 +94,21 @@
<h3>{{ toolForm.id ? '编辑网址' : '添加网址' }}</h3> <h3>{{ toolForm.id ? '编辑网址' : '添加网址' }}</h3>
<div class="form-group"> <div class="form-group">
<label><span class="required">*</span>访问地址：</label> <label><span class="required">*</span>访问地址：</label>
<input v-model="toolForm.url" placeholder="例如：https://www.qdintc.com" /> <input v-model="toolForm.url" placeholder="例如：https://www.baidu.com" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label><span class="required">*</span>网址名称：</label> <label><span class="required">*</span>网址名称：</label>
<input v-model="toolForm.name" placeholder="例如：智聪官网" /> <input v-model="toolForm.name" placeholder="例如：网址1" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label>网址描述：</label> <label>网址描述：</label>
<input v-model="toolForm.desc" placeholder="例如：智聪官网" /> <input v-model="toolForm.desc" placeholder="例如：网址描述" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label>显示地址：</label> <label>显示地址：</label>
<input v-model="toolForm.displayUrl" placeholder="例如：www.qdintc.com" /> <input v-model="toolForm.displayUrl" placeholder="例如：www.baidu.com" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label>图标文字：</label> <label>图标文字：</label>
@@ -117,8 +117,8 @@
<div class="form-group"> <div class="form-group">
<label>图标颜色：</label> <label>图标颜色：</label>
<div class="color-picker"> <div class="color-picker">
<div <div
v-for="(colorOption, index) in colorOptions" v-for="(colorOption, index) in colorOptions"
:key="index" :key="index"
class="color-option" class="color-option"
:class="{ active: toolForm.color === colorOption.value }" :class="{ active: toolForm.color === colorOption.value }"
@@ -170,7 +170,7 @@ import ToolService from '../services/ToolService'
export default { export default {
name: 'ManagePage', name: 'ManagePage',
components: { Page }, components: { Page },
data() { data() {
return { return {
loading: false, loading: false,
@@ -233,7 +233,7 @@ export default {
currentCategory: null currentCategory: null
} }
}, },
computed: { computed: {
messageIcon() { messageIcon() {
const icons = { const icons = {
@@ -244,13 +244,13 @@ export default {
return icons[this.message.type] || '✓' return icons[this.message.type] || '✓'
} }
}, },
created() { created() {
this.loadData() this.loadData()
}, },
methods: { methods: {
// 消息提示 // 消息提示
showMessage(text, type = 'success') { showMessage(text, type = 'success') {
@@ -287,12 +287,12 @@ export default {
async loadData() { async loadData() {
try { try {
this.loading = true this.loading = true
const [categoriesRes, toolsRes] = await Promise.all([ const [categoriesRes, toolsRes] = await Promise.all([
ToolService.getCategories(), ToolService.getCategories(),
ToolService.getTools() ToolService.getTools()
]) ])
if (categoriesRes && categoriesRes.code === 200 && toolsRes && toolsRes.code === 200) { if (categoriesRes && categoriesRes.code === 200 && toolsRes && toolsRes.code === 200) {
const categories = (categoriesRes.rows || []).map(cat => ({ const categories = (categoriesRes.rows || []).map(cat => ({
id: cat.id, id: cat.id,
@@ -301,7 +301,7 @@ export default {
sortOrder: cat.sortOrder || 0, sortOrder: cat.sortOrder || 0,
tools: [] tools: []
})) }))
const tools = (toolsRes.rows || []).map(tool => ({ const tools = (toolsRes.rows || []).map(tool => ({
id: tool.id, id: tool.id,
categoryId: tool.categoryId, categoryId: tool.categoryId,
@@ -313,16 +313,16 @@ export default {
color: tool.color, color: tool.color,
sortOrder: tool.sortOrder || 0 sortOrder: tool.sortOrder || 0
})) }))
tools.forEach(tool => { tools.forEach(tool => {
const category = categories.find(cat => cat.id === tool.categoryId) const category = categories.find(cat => cat.id === tool.categoryId)
if (category) { if (category) {
category.tools.push(tool) category.tools.push(tool)
} }
}) })
categories.sort((a, b) => a.sortOrder - b.sortOrder) categories.sort((a, b) => a.sortOrder - b.sortOrder)
this.categories = categories this.categories = categories
} }
} catch (error) { } catch (error) {
@@ -363,7 +363,7 @@ export default {
this.showMessage('请填写分类标识', 'warning') this.showMessage('请填写分类标识', 'warning')
return return
} }
if (!this.categoryForm.title) { if (!this.categoryForm.title) {
this.showMessage('请填写分类名称', 'warning') this.showMessage('请填写分类名称', 'warning')
return return
@@ -387,9 +387,9 @@ export default {
categoryTitle: this.categoryForm.title, categoryTitle: this.categoryForm.title,
sortOrder: this.categoryForm.sortOrder sortOrder: this.categoryForm.sortOrder
} }
const response = await ToolService.createCategory(data) const response = await ToolService.createCategory(data)
if (response && response.code === 200) { if (response && response.code === 200) {
this.showMessage('添加成功') this.showMessage('添加成功')
this.closeCategoryDialog() this.closeCategoryDialog()
@@ -411,7 +411,7 @@ export default {
categoryTitle: this.categoryForm.title, categoryTitle: this.categoryForm.title,
sortOrder: this.categoryForm.sortOrder sortOrder: this.categoryForm.sortOrder
}) })
if (response && response.code === 200) { if (response && response.code === 200) {
this.showMessage('修改成功') this.showMessage('修改成功')
this.closeCategoryDialog() this.closeCategoryDialog()
@@ -426,10 +426,10 @@ export default {
}, },
deleteCategory(category) { deleteCategory(category) {
const message = category.tools && category.tools.length > 0 const message = category.tools && category.tools.length > 0
? `该分类下还有 ${category.tools.length} 个网址，确定要删除"${category.title}"吗？` ? `该分类下还有 ${category.tools.length} 个网址，确定要删除"${category.title}"吗？`
: `确定要删除分类"${category.title}"吗？` : `确定要删除分类"${category.title}"吗？`
this.showConfirm(message, () => { this.showConfirm(message, () => {
this.deleteCategoryFromServer(category.id) this.deleteCategoryFromServer(category.id)
}) })
@@ -438,7 +438,7 @@ export default {
async deleteCategoryFromServer(id) { async deleteCategoryFromServer(id) {
try { try {
const response = await ToolService.deleteCategory([id]) const response = await ToolService.deleteCategory([id])
if (response && response.code === 200) { if (response && response.code === 200) {
this.showMessage('删除成功') this.showMessage('删除成功')
this.loadData() this.loadData()
@@ -494,12 +494,12 @@ export default {
this.showMessage('请填写网址名称', 'warning') this.showMessage('请填写网址名称', 'warning')
return return
} }
if (!this.toolForm.url) { if (!this.toolForm.url) {
this.showMessage('请填写访问地址', 'warning') this.showMessage('请填写访问地址', 'warning')
return return
} }
// 验证URL格式 // 验证URL格式
if (!this.isValidUrl(this.toolForm.url)) { if (!this.isValidUrl(this.toolForm.url)) {
this.showMessage('请输入完整的URL地址，必须以http://或https://开头', 'warning') this.showMessage('请输入完整的URL地址，必须以http://或https://开头', 'warning')
@@ -516,7 +516,7 @@ export default {
this.addToolToServer() this.addToolToServer()
} }
}, },
// 验证URL格式 // 验证URL格式
isValidUrl(url) { isValidUrl(url) {
if (!url) return false if (!url) return false
@@ -535,7 +535,7 @@ export default {
color: this.toolForm.color, color: this.toolForm.color,
sortOrder: this.toolForm.sortOrder sortOrder: this.toolForm.sortOrder
}) })
if (response && response.code === 200) { if (response && response.code === 200) {
this.showMessage('添加成功') this.showMessage('添加成功')
this.closeToolDialog() this.closeToolDialog()
@@ -562,7 +562,7 @@ export default {
color: this.toolForm.color, color: this.toolForm.color,
sortOrder: this.toolForm.sortOrder sortOrder: this.toolForm.sortOrder
}) })
if (response && response.code === 200) { if (response && response.code === 200) {
this.showMessage('修改成功') this.showMessage('修改成功')
this.closeToolDialog() this.closeToolDialog()
@@ -585,7 +585,7 @@ export default {
async deleteToolFromServer(id) { async deleteToolFromServer(id) {
try { try {
const response = await ToolService.deleteTool([id]) const response = await ToolService.deleteTool([id])
if (response && response.code === 200) { if (response && response.code === 200) {
this.showMessage('删除成功') this.showMessage('删除成功')
this.loadData() this.loadData()
@@ -628,7 +628,7 @@ export default {
justify-content: center; // PC端居中 justify-content: center; // PC端居中
align-items: center; align-items: center;
z-index: 1000; z-index: 1000;
h1 { h1 {
margin: 0; margin: 0;
font-size: 36px; // 与HomePage保持一致 font-size: 36px; // 与HomePage保持一致
@@ -637,7 +637,7 @@ export default {
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
letter-spacing: 2px; // 添加字母间距 letter-spacing: 2px; // 添加字母间距
} }
.back-btn { .back-btn {
position: absolute; // 绝对定位避免遮挡标题 position: absolute; // 绝对定位避免遮挡标题
right: 40px; right: 40px;
@@ -651,7 +651,7 @@ export default {
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
// 返回图标 // 返回图标
&::before { &::before {
content: '◄'; content: '◄';
@@ -660,17 +660,17 @@ export default {
display: inline-block; display: inline-block;
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
&:hover { &:hover {
transform: translateY(-3px); transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5); box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
&::before { &::before {
transform: translateX(-4px); transform: translateX(-4px);
} }
} }
&:active { &:active {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
@@ -688,7 +688,7 @@ export default {
padding: 20px 12px; padding: 20px 12px;
margin-bottom: 24px; margin-bottom: 24px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
.section-header { .section-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -696,7 +696,7 @@ export default {
margin-bottom: 20px; margin-bottom: 20px;
padding-bottom: 16px; padding-bottom: 16px;
border-bottom: 2px solid #f0f0f0; border-bottom: 2px solid #f0f0f0;
h2 { h2 {
margin: 0; margin: 0;
font-size: 20px; font-size: 20px;
@@ -717,17 +717,17 @@ export default {
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
&:hover { &:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4); box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
} }
&:active { &:active {
transform: translateY(0); transform: translateY(0);
} }
&.small { &.small {
padding: 6px 16px; padding: 6px 16px;
font-size: 13px; font-size: 13px;
@@ -738,7 +738,7 @@ export default {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 10px; gap: 10px;
.category-item { .category-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -748,17 +748,17 @@ export default {
border-radius: 6px; border-radius: 6px;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
transition: all 0.2s ease; transition: all 0.2s ease;
&:hover { &:hover {
background: #f3f4f6; background: #f3f4f6;
border-color: @primary-color; border-color: @primary-color;
} }
.category-info { .category-info {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
.category-key { .category-key {
padding: 3px 10px; padding: 3px 10px;
background: @primary-color; background: @primary-color;
@@ -768,7 +768,7 @@ export default {
font-weight: 500; font-weight: 500;
white-space: nowrap; white-space: nowrap;
} }
.category-name { .category-name {
font-size: 14px; font-size: 14px;
color: @text-primary; color: @text-primary;
@@ -778,7 +778,7 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.category-sort { .category-sort {
font-size: 12px; font-size: 12px;
color: @primary-color; color: @primary-color;
@@ -789,18 +789,18 @@ export default {
font-weight: 500; font-weight: 500;
} }
} }
.category-footer { .category-footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.category-count { .category-count {
font-size: 12px; font-size: 12px;
color: @text-tertiary; color: @text-tertiary;
white-space: nowrap; white-space: nowrap;
} }
.category-actions { .category-actions {
display: flex; display: flex;
gap: 6px; gap: 6px;
@@ -811,11 +811,11 @@ export default {
.tool-group { .tool-group {
margin-bottom: 24px; margin-bottom: 24px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.tool-group-header { .tool-group-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -824,19 +824,19 @@ export default {
padding: 12px 16px; padding: 12px 16px;
background: #f9fafb; background: #f9fafb;
border-radius: 6px; border-radius: 6px;
h3 { h3 {
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
color: @text-primary; color: @text-primary;
} }
} }
.tool-list { .tool-list {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 10px; gap: 10px;
.tool-item { .tool-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -846,17 +846,17 @@ export default {
border-radius: 6px; border-radius: 6px;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
transition: all 0.2s ease; transition: all 0.2s ease;
&:hover { &:hover {
background: #f3f4f6; background: #f3f4f6;
border-color: @primary-color; border-color: @primary-color;
} }
.tool-main { .tool-main {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
.tool-icon { .tool-icon {
width: 36px; width: 36px;
height: 36px; height: 36px;
@@ -869,11 +869,11 @@ export default {
font-weight: bold; font-weight: bold;
flex-shrink: 0; flex-shrink: 0;
} }
.tool-info { .tool-info {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
.tool-name { .tool-name {
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
@@ -883,7 +883,7 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.tool-desc { .tool-desc {
font-size: 11px; font-size: 11px;
color: @text-secondary; color: @text-secondary;
@@ -892,7 +892,7 @@ export default {
white-space: nowrap; white-space: nowrap;
} }
} }
.tool-sort { .tool-sort {
font-size: 11px; font-size: 11px;
color: @primary-color; color: @primary-color;
@@ -904,13 +904,13 @@ export default {
flex-shrink: 0; flex-shrink: 0;
} }
} }
.tool-footer { .tool-footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
.tool-url { .tool-url {
font-size: 10px; font-size: 10px;
color: @text-tertiary; color: @text-tertiary;
@@ -920,7 +920,7 @@ export default {
white-space: nowrap; white-space: nowrap;
flex: 1; flex: 1;
} }
.tool-actions { .tool-actions {
display: flex; display: flex;
gap: 6px; gap: 6px;
@@ -941,12 +941,12 @@ button {
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
&:hover { &:hover {
background: #66b1ff; background: #66b1ff;
} }
} }
&.delete-btn { &.delete-btn {
padding: 5px 10px; padding: 5px 10px;
background: #f56c6c; background: #f56c6c;
@@ -956,7 +956,7 @@ button {
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
&:hover { &:hover {
background: #f78989; background: #f78989;
} }
@@ -975,7 +975,7 @@ button {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 2000; z-index: 2000;
.dialog { .dialog {
background: white; background: white;
border-radius: 12px; border-radius: 12px;
@@ -983,29 +983,29 @@ button {
width: 90%; width: 90%;
max-width: 500px; max-width: 500px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
h3 { h3 {
margin: 0 0 20px; margin: 0 0 20px;
font-size: 20px; font-size: 20px;
color: @text-primary; color: @text-primary;
} }
.form-group { .form-group {
margin-bottom: 16px; margin-bottom: 16px;
label { label {
display: block; display: block;
margin-bottom: 8px; margin-bottom: 8px;
font-size: 14px; font-size: 14px;
color: @text-secondary; color: @text-secondary;
font-weight: 500; font-weight: 500;
.required { .required {
color: #f56c6c; color: #f56c6c;
margin-right: 4px; margin-right: 4px;
} }
} }
input, select { input, select {
width: 100%; width: 100%;
padding: 10px 12px; padding: 10px 12px;
@@ -1014,31 +1014,31 @@ button {
font-size: 14px; font-size: 14px;
box-sizing: border-box; box-sizing: border-box;
transition: border-color 0.2s ease; transition: border-color 0.2s ease;
&:focus { &:focus {
outline: none; outline: none;
border-color: @primary-color; border-color: @primary-color;
} }
&:disabled { &:disabled {
background: #f5f7fa; background: #f5f7fa;
color: #999; color: #999;
cursor: not-allowed; cursor: not-allowed;
} }
} }
select { select {
cursor: pointer; cursor: pointer;
} }
} }
// 颜色选择器样式 // 颜色选择器样式
.color-picker { .color-picker {
display: grid; display: grid;
grid-template-columns: repeat(8, 1fr); grid-template-columns: repeat(8, 1fr);
gap: 8px; gap: 8px;
padding: 0 2px; padding: 0 2px;
.color-option { .color-option {
width: 100%; width: 100%;
aspect-ratio: 1; aspect-ratio: 1;
@@ -1050,17 +1050,17 @@ button {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
&:hover { &:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
} }
&.active { &.active {
border-color: @primary-color; border-color: @primary-color;
box-shadow: 0 0 0 2px white, 0 0 0 4px @primary-color; box-shadow: 0 0 0 2px white, 0 0 0 4px @primary-color;
} }
.check-icon { .check-icon {
color: white; color: white;
font-size: 20px; font-size: 20px;
@@ -1069,13 +1069,13 @@ button {
} }
} }
} }
.dialog-actions { .dialog-actions {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 12px; gap: 12px;
margin-top: 24px; margin-top: 24px;
button { button {
padding: 10px 24px; padding: 10px 24px;
border-radius: 6px; border-radius: 6px;
@@ -1083,23 +1083,23 @@ button {
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.cancel-btn { .cancel-btn {
background: white; background: white;
border: 1px solid @border-color; border: 1px solid @border-color;
color: @text-primary; color: @text-primary;
&:hover { &:hover {
color: @primary-color; color: @primary-color;
border-color: @primary-color; border-color: @primary-color;
} }
} }
.confirm-btn { .confirm-btn {
background: @primary-color; background: @primary-color;
border: none; border: none;
color: white; color: white;
&:hover { &:hover {
background: #5568d3; background: #5568d3;
} }
@@ -1117,28 +1117,28 @@ button {
max-width: 400px; max-width: 400px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
text-align: center; text-align: center;
.confirm-icon { .confirm-icon {
font-size: 48px; font-size: 48px;
margin-bottom: 16px; margin-bottom: 16px;
&.warning { &.warning {
color: #e6a23c; color: #e6a23c;
} }
} }
.confirm-message { .confirm-message {
font-size: 16px; font-size: 16px;
color: @text-primary; color: @text-primary;
margin-bottom: 24px; margin-bottom: 24px;
line-height: 1.6; line-height: 1.6;
} }
.confirm-actions { .confirm-actions {
display: flex; display: flex;
gap: 12px; gap: 12px;
justify-content: center; justify-content: center;
button { button {
padding: 10px 32px; padding: 10px 32px;
border-radius: 6px; border-radius: 6px;
@@ -1147,30 +1147,30 @@ button {
transition: all 0.2s ease; transition: all 0.2s ease;
min-width: 100px; min-width: 100px;
} }
.cancel-btn { .cancel-btn {
background: white; background: white;
border: 1px solid @border-color; border: 1px solid @border-color;
color: @text-primary; color: @text-primary;
&:hover { &:hover {
color: @primary-color; color: @primary-color;
border-color: @primary-color; border-color: @primary-color;
} }
} }
.confirm-btn { .confirm-btn {
background: @primary-color; background: @primary-color;
border: none; border: none;
color: white; color: white;
&:hover { &:hover {
background: #5568d3; background: #5568d3;
} }
&.danger { &.danger {
background: #f56c6c; background: #f56c6c;
&:hover { &:hover {
background: #f78989; background: #f78989;
} }
@@ -1195,37 +1195,37 @@ button {
z-index: 3000; z-index: 3000;
min-width: 300px; min-width: 300px;
justify-content: center; justify-content: center;
.message-icon { .message-icon {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
} }
&.success { &.success {
background: #f0f9ff; background: #f0f9ff;
border: 1px solid #67c23a; border: 1px solid #67c23a;
color: #67c23a; color: #67c23a;
.message-icon { .message-icon {
color: #67c23a; color: #67c23a;
} }
} }
&.error { &.error {
background: #fef0f0; background: #fef0f0;
border: 1px solid #f56c6c; border: 1px solid #f56c6c;
color: #f56c6c; color: #f56c6c;
.message-icon { .message-icon {
color: #f56c6c; color: #f56c6c;
} }
} }
&.warning { &.warning {
background: #fdf6ec; background: #fdf6ec;
border: 1px solid #e6a23c; border: 1px solid #e6a23c;
color: #e6a23c; color: #e6a23c;
.message-icon { .message-icon {
color: #e6a23c; color: #e6a23c;
} }
@@ -1253,32 +1253,32 @@ button {
.manage-header { .manage-header {
justify-content: flex-start; // 手机端左对齐 justify-content: flex-start; // 手机端左对齐
padding: 20px; padding: 20px;
h1 { h1 {
font-size: 24px; // 手机端与HomePage保持一致 font-size: 24px; // 手机端与HomePage保持一致
} }
.back-btn { .back-btn {
right: 20px; right: 20px;
padding: 10px 20px; padding: 10px 20px;
font-size: 14px; font-size: 14px;
&::before { &::before {
font-size: 12px; font-size: 12px;
} }
} }
} }
.manage-container { .manage-container {
padding: 16px 8px; padding: 16px 8px;
} }
.category-list { .category-list {
grid-template-columns: 1fr !important; grid-template-columns: 1fr !important;
} }
.tool-list { .tool-list {
grid-template-columns: 1fr !important; grid-template-columns: 1fr !important;
} }
} }
</style> </style>