fix:样式优化完善。

src/views/ManagePage.vue

@@ -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,30 +151,69 @@
 
     <!-- 工具编辑对话框 -->
     <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">
+        <div class="form-row">
-          <label><span class="required">*</span>访问地址：</label>
-          <input v-model="toolForm.url" placeholder="例如：https://www.baidu.com" />
-        </div>
           <div class="form-group">
             <label><span class="required">*</span>网址名称：</label>
             <input v-model="toolForm.name" placeholder="例如：网址1" />
           </div>
-
           <div class="form-group">
-          <label>网址描述：</label>
+            <label><span class="required">*</span>访问地址：</label>
-          <input v-model="toolForm.desc" placeholder="例如：网址描述" />
+            <input v-model="toolForm.url" placeholder="例如：https://www.baidu.com" />
           </div>
-
+        </div>
+        <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-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-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-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>
           <div class="color-picker">
@@ -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;
+      display: flex;
-      grid-template-columns: repeat(8, 1fr);
+      flex-wrap: wrap;
-      gap: 8px;
+      gap: 10px;
-      padding: 0 2px;
+      padding: 0;
 
       .color-option {
-        width: 100%;
+        width: 60px;
-        aspect-ratio: 1;
+        height: 60px;
-        border-radius: 8px;
+        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;