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 22:16:46 +08:00
parent 6101b95082
commit 03bb3452f6
1 changed files with 112 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
src/views/ManagePage.vue
View File

@@ -71,7 +71,7 @@
<button class="add-btn small" @click="showAddToolDialog(category)">+ 添加网址</button>
</div>
<div class="tool-list">
<div v-for="tool in category.tools" :key="tool.id" class="tool-item">
<div v-for="tool in category.tools" :key="tool.id" class="tool-item" @click="openToolUrl(tool.url)">
<div class="tool-main">
<div class="tool-icon" :style="{background: tool.color}">
<span>{{ tool.icon }}</span>
@@ -84,7 +84,7 @@
</div>
<div class="tool-footer">
<div class="tool-url">{{ tool.url }}</div>
<div class="tool-actions">
<div class="tool-actions" @click.stop>
<button class="edit-btn" @click="editTool(category, tool)">编辑</button>
<button class="delete-btn" @click="deleteTool(category, tool)">删除</button>
</div>
@@ -130,6 +130,14 @@
<label><span class="required">*</span>书签分组名称：</label>
<input v-model="categoryForm.title" placeholder="例如：书签1" />
</div>
<div class="form-group" v-if="categoryForm.id">
<label><span class="required">*</span>所属大分类：</label>
<select v-model="categoryForm.superCategoryId">
<option v-for="superCat in superCategories" :key="superCat.id" :value="superCat.id">
{{ superCat.title }}
</option>
</select>
</div>
<div class="form-group">
<label>排序序号：</label>
<input v-model.number="categoryForm.sortOrder" type="number" placeholder="数字越小越靠前，例如：0" />
@@ -143,29 +151,68 @@
<!-- 工具编辑对话框 -->
<div v-if="showToolDialog" class="dialog-overlay" @click="closeToolDialog">
<div class="dialog" @click.stop>
<div class="dialog dialog-wide" @click.stop>
<h3>{{ toolForm.id ? '编辑网址' : '添加网址' }}</h3>
<div class="form-group">
<label><span class="required">*</span>访问地址：</label>
<input v-model="toolForm.url" placeholder="例如：https://www.baidu.com" />
<div class="form-row">
<div class="form-group">
<label><span class="required">*</span>网址名称：</label>
<input v-model="toolForm.name" placeholder="例如：网址1" />
</div>
<div class="form-group">
<label><span class="required">*</span>访问地址：</label>
<input v-model="toolForm.url" placeholder="例如：https://www.baidu.com" />
</div>
</div>
<div class="form-group">
<label><span class="required">*</span>网址名称：</label>
<input v-model="toolForm.name" placeholder="例如：网址1" />
<div class="form-row" v-if="toolForm.id">
<div class="form-group">
<label><span class="required">*</span>所属分组：</label>
<select v-model="toolForm.categoryId">
<option v-for="cat in currentCategories" :key="cat.id" :value="cat.id">
{{ cat.title }}
</option>
</select>
</div>
<div class="form-group">
<label>显示地址：</label>
<input v-model="toolForm.displayUrl" placeholder="例如：www.baidu.com" />
</div>
</div>
<div class="form-group">
<label>网址描述：</label>
<input v-model="toolForm.desc" placeholder="例如：网址描述" />
<div class="form-row" v-else>
<div class="form-group">
<label>显示地址：</label>
<input v-model="toolForm.displayUrl" placeholder="例如：www.baidu.com" />
</div>
<div class="form-group">
<label>网址描述：</label>
<input v-model="toolForm.desc" placeholder="例如：网址描述" />
</div>
</div>
<div class="form-group">
<label>显示地址：</label>
<input v-model="toolForm.displayUrl" placeholder="例如：www.baidu.com" />
<div class="form-row" v-if="toolForm.id">
<div class="form-group">
<label>网址描述：</label>
<input v-model="toolForm.desc" placeholder="例如：网址描述" />
</div>
<div class="form-group">
<label>图标文字：</label>
<input v-model="toolForm.icon" placeholder="例如：官" maxlength="4" />
</div>
</div>
<div class="form-group">
<label>图标文字：</label>
<input v-model="toolForm.icon" placeholder="例如：官" maxlength="4" />
<div class="form-row" v-else>
<div class="form-group">
<label>图标文字：</label>
<input v-model="toolForm.icon" placeholder="例如：官" maxlength="4" />
</div>
<div class="form-group">
<label>排序序号：</label>
<input v-model.number="toolForm.sortOrder" type="number" placeholder="数字越小越靠前，例如：0" />
</div>
</div>
<div class="form-row" v-if="toolForm.id">
<div class="form-group">
<label>排序序号：</label>
<input v-model.number="toolForm.sortOrder" type="number" placeholder="数字越小越靠前，例如：0" />
</div>
<div class="form-group"></div>
</div>
<div class="form-group">
<label>图标颜色：</label>
@@ -179,14 +226,11 @@
@click="toolForm.color = colorOption.value"
:title="colorOption.name"
>
<span v-if="toolForm.color === colorOption.value" class="check-icon">✓</span>
<span v-if="toolForm.color === colorOption.value && !toolForm.icon" class="check-icon">✓</span>
<span v-if="toolForm.icon" class="icon-preview">{{ toolForm.icon }}</span>
</div>
</div>
</div>
<div class="form-group">
<label>排序序号：</label>
<input v-model.number="toolForm.sortOrder" type="number" placeholder="数字越小越靠前，例如：0" />
</div>
<div class="dialog-actions">
<button class="cancel-btn" @click="closeToolDialog">取消</button>
<button class="confirm-btn" @click="saveTool">保存</button>
@@ -701,7 +745,7 @@ export default {
this.currentCategory = category
this.toolForm = {
id: null,
categoryKey: category.key,
categoryId: category.id,
name: '',
desc: '',
url: '',
@@ -717,7 +761,7 @@ export default {
this.currentCategory = category
this.toolForm = {
id: tool.id,
categoryKey: category.key,
categoryId: tool.categoryId,
name: tool.name,
desc: tool.desc,
url: tool.url,
@@ -754,8 +798,10 @@ export default {
if (this.toolForm.id) {
this.updateToolToServer()
} else {
if (this.currentCategory.tools.find(t => t.name === this.toolForm.name)) {
this.showMessage('该分类下已存在同名网址，请使用其他名称', 'warning')
// 添加时检查分组下是否已存在同名网址
const category = this.categories.find(c => c.id === this.toolForm.categoryId)
if (category && category.tools.find(t => t.name === this.toolForm.name)) {
this.showMessage('该分组下已存在同名网址，请使用其他名称', 'warning')
return
}
this.addToolToServer()
@@ -771,7 +817,7 @@ export default {
async addToolToServer() {
try {
const response = await ToolService.createTool({
categoryId: this.currentCategory.id,
categoryId: this.toolForm.categoryId,
name: this.toolForm.name,
description: this.toolForm.desc,
url: this.toolForm.url,
@@ -798,7 +844,7 @@ export default {
try {
const response = await ToolService.updateTool({
id: this.toolForm.id,
categoryId: this.currentCategory.id,
categoryId: this.toolForm.categoryId,
name: this.toolForm.name,
description: this.toolForm.desc,
url: this.toolForm.url,
@@ -1569,23 +1615,36 @@ button {
.dialog {
background: white;
border-radius: 12px;
padding: 24px;
padding: 20px;
width: 90%;
max-width: 500px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
max-height: 90vh;
overflow-y: auto;
&.dialog-wide {
max-width: 700px;
}
h3 {
margin: 0 0 20px;
margin: 0 0 16px;
font-size: 20px;
color: @text-primary;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 0;
}
.form-group {
margin-bottom: 16px;
margin-bottom: 12px;
label {
display: block;
margin-bottom: 8px;
margin-bottom: 6px;
font-size: 14px;
color: @text-secondary;
font-weight: 500;
@@ -1598,7 +1657,7 @@ button {
input, select {
width: 100%;
padding: 10px 12px;
padding: 8px 12px;
border: 1px solid @border-color;
border-radius: 6px;
font-size: 14px;
@@ -1624,22 +1683,23 @@ button {
// 颜色选择器样式
.color-picker {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 8px;
padding: 0 2px;
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 0;
.color-option {
width: 100%;
aspect-ratio: 1;
border-radius: 8px;
width: 60px;
height: 60px;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
border: 3px solid transparent;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
flex-shrink: 0;
&:hover {
transform: translateY(-2px);
@@ -1657,6 +1717,13 @@ button {
font-weight: bold;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.icon-preview {
color: white;
font-size: 24px;
font-weight: bold;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
}
}
@@ -1664,7 +1731,7 @@ button {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 24px;
margin-top: 16px;
button {
padding: 10px 24px;