fix: 新增复制功能。

2025-12-16 12:06:31 +08:00
parent 0e98dfe4c4
commit 89671b43ed
2 changed files with 101 additions and 13 deletions
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -646,7 +646,9 @@ export default {
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  width: @card-width;
+  min-width: @card-width; // 最小宽度
+  width: auto; // 自动宽度
+  max-width: 400px; // 最大宽度限制
  position: relative;
  z-index: 1; // 确保卡片低于Tab区域

@@ -838,12 +840,16 @@ export default {
  font-weight: 600;
  color: @text-primary;
  margin: 0 0 4px;
+  white-space: nowrap; // 不换行
+  overflow: visible; // 允许溢出
 }

 .tool-desc {
  font-size: 13px;
  color: @text-secondary;
  margin: 0 0 4px;
+  white-space: nowrap; // 不换行
+  overflow: visible; // 允许溢出
 }

 .tool-url {
--- a/src/views/ManagePage.vue
+++ b/src/views/ManagePage.vue
@@ -85,6 +85,7 @@
              <div class="tool-footer">
                <div class="tool-url" @click="openToolUrl(tool.url, $event)" style="cursor: pointer; text-decoration: underline;" title="点击打开">{{ tool.url }}</div>
                <div class="tool-actions" @click.stop>
+                  <button class="copy-btn" @click="copyTool(category, tool)">复制</button>
                  <button class="edit-btn" @click="editTool(category, tool)">编辑</button>
                  <button class="delete-btn" @click="deleteTool(category, tool)">删除</button>
                </div>
@@ -152,7 +153,7 @@
    <!-- 工具编辑对话框 -->
    <div v-if="showToolDialog" class="dialog-overlay" @click="closeToolDialog">
      <div class="dialog dialog-wide" @click.stop>
-        <h3>{{ toolForm.id ? '编辑网址' : '添加网址' }}</h3>
+        <h3>{{ isCopyMode ? '复制网址' : (toolForm.id ? '编辑网址' : '添加网址') }}</h3>
        <div class="form-row">
          <div class="form-group">
            <label><span class="required">*</span>网址名称：</label>
@@ -163,20 +164,38 @@
            <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 }}
+        <div class="form-row" v-if="toolForm.id || isCopyMode">
+          <div class="form-group" v-if="isCopyMode">
+            <label><span class="required">*</span>所属书签分类：</label>
+            <select v-model="toolForm.superCategoryId" @change="onSuperCategoryChange">
+              <option v-for="superCat in superCategories" :key="superCat.id" :value="superCat.id">
+                {{ superCat.title }}
              </option>
            </select>
          </div>
          <div class="form-group">
+            <label><span class="required">*</span>所属分组：</label>
+            <select v-model="toolForm.categoryId">
+              <option v-for="cat in availableCategories" :key="cat.id" :value="cat.id">
+                {{ cat.title }}
+              </option>
+            </select>
+          </div>
+          <div class="form-group" v-if="!isCopyMode">
            <label>显示地址：</label>
            <input v-model="toolForm.displayUrl" placeholder="例如：www.baidu.com" />
          </div>
        </div>
+        <div class="form-row" v-if="isCopyMode">
+          <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-else>
          <div class="form-group">
            <label>显示地址：</label>
@@ -281,6 +300,7 @@ export default {
      showConfirmDialog: false,
      confirmMessage: '',
      confirmCallback: null,
+      isCopyMode: false, // 是否为复制模式
      message: {
        show: false,
        text: '',
@@ -330,6 +350,8 @@ export default {
      toolForm: {
        id: null,
        categoryKey: '',
+        superCategoryId: null, // 复制时需要选择的大分类
+        categoryId: null,
        name: '',
        desc: '',
        url: '',
@@ -359,6 +381,17 @@ export default {
    currentCategories() {
      if (!this.activeSuperCategoryId) return []
      return this.categories.filter(c => c.superCategoryId === this.activeSuperCategoryId)
+    },
+
+    // 可用的分组列表（编辑或复制时根据选择的大分类过滤）
+    availableCategories() {
+      if (this.isCopyMode && this.toolForm.superCategoryId) {
+        return this.categories.filter(c => c.superCategoryId === this.toolForm.superCategoryId)
+      }
+      if (this.toolForm.id) {
+        return this.currentCategories
+      }
+      return []
    }
  },

@@ -804,6 +837,7 @@ export default {

    editTool(category, tool) {
      this.currentCategory = category
+      this.isCopyMode = false
      this.toolForm = {
        id: tool.id,
        categoryId: tool.categoryId,
@@ -818,9 +852,42 @@ export default {
      this.showToolDialog = true
    },

+    copyTool(category, tool) {
+      this.currentCategory = category
+      this.isCopyMode = true
+      // 获取当前分组所属的大分类
+      const currentCategory = this.categories.find(c => c.id === category.id)
+      const superCategoryId = currentCategory ? currentCategory.superCategoryId : this.activeSuperCategoryId
+      
+      this.toolForm = {
+        id: null, // 清空id，复制时作为新增
+        superCategoryId: superCategoryId, // 设置大分类
+        categoryId: tool.categoryId,
+        name: tool.name,
+        desc: tool.desc,
+        url: tool.url,
+        displayUrl: tool.displayUrl,
+        icon: tool.icon,
+        color: tool.color,
+        sortOrder: category.tools.length // 默认放到最后
+      }
+      this.showToolDialog = true
+    },
+
+    onSuperCategoryChange() {
+      // 大分类改变时，重置分组选择
+      const availableCats = this.categories.filter(c => c.superCategoryId === this.toolForm.superCategoryId)
+      if (availableCats.length > 0) {
+        this.toolForm.categoryId = availableCats[0].id
+      } else {
+        this.toolForm.categoryId = null
+      }
+    },
+
    closeToolDialog() {
      this.showToolDialog = false
      this.currentCategory = null
+      this.isCopyMode = false
    },

    saveTool() {
@@ -840,7 +907,7 @@ export default {
        return
      }

-      if (this.toolForm.id) {
+      if (this.toolForm.id && !this.isCopyMode) {
        this.updateToolToServer()
      } else {
        // 添加时检查分组下是否已存在同名网址
@@ -873,15 +940,15 @@ export default {
        })

        if (response && response.code === 200) {
-          this.showMessage('添加成功')
+          this.showMessage(this.isCopyMode ? '复制成功' : '添加成功')
          this.closeToolDialog()
          this.loadData()
        } else {
-          this.showMessage('添加失败：' + (response.msg || '未知错误'), 'error')
+          this.showMessage((this.isCopyMode ? '复制失败：' : '添加失败：') + (response.msg || '未知错误'), 'error')
        }
      } catch (error) {
        console.error('添加工具失败:', error)
-        this.showMessage('添加失败，请检查网络连接', 'error')
+        this.showMessage((this.isCopyMode ? '复制失败' : '添加失败') + '，请检查网络连接', 'error')
      }
    },

@@ -1642,6 +1709,21 @@ export default {
 }

 button {
+  &.copy-btn {
+    padding: 5px 10px;
+    background: #67c23a;
+    border: none;
+    border-radius: 4px;
+    color: white;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: #85ce61;
+    }
+  }
+
  &.edit-btn {
    padding: 5px 10px;
    background: #409eff;
@@ -2108,7 +2190,7 @@ button {

  // 手机端增大按钮，更易点击
  button {
-    &.edit-btn, &.delete-btn {
+    &.copy-btn, &.edit-btn, &.delete-btn {
      padding: 8px 12px !important;
      font-size: 13px !important;
      min-width: 50px;