aifastdb 3.7.6 → 3.8.6-mac.0

package/dist/security/server/admin/crud-table.js

@@ -22,172 +22,172 @@ function renderCrudTable(config) {
     const totalPages = Math.ceil(total / pageSize);
     const tableFields = fields.filter(f => f.showInTable !== false);
     const formFields = fields.filter(f => f.showInForm !== false);
-    return `
+    return `
     <div class="crud-table" id="crud-${id}" data-config='${JSON.stringify({
         id,
         pageSize,
         currentPage,
         iconOptions,
         deleteConfirmMessage,
-    })}'>
-      <!-- 头部 -->
-      <div class="crud-header">
-        <div class="crud-title">
-          ${iconName ? (0, icons_1.icon)(iconName) : ''}
-          <h1>${title}</h1>
-          <span class="crud-count">共 ${total} 条记录</span>
-        </div>
-        <div class="crud-actions">
-          ${canCreate ? `
-            <button class="btn btn-success" onclick="CrudTable.showCreate('${id}')">
-              ${(0, icons_1.icon)('plus')}
-              <span>添加</span>
-            </button>
-          ` : ''}
-          ${canRefresh ? `
-            <button class="btn btn-primary" onclick="CrudTable.refresh('${id}')">
-              ${(0, icons_1.icon)('refresh')}
-              <span>刷新</span>
-            </button>
-          ` : ''}
-        </div>
-      </div>
-
-      <!-- 搜索栏 -->
-      ${canSearch ? `
-        <div class="crud-search">
-          <form onsubmit="CrudTable.search('${id}', event)">
-            <div class="search-box">
-              ${(0, icons_1.icon)('search')}
-              <input 
-                type="text" 
-                id="crud-${id}-search" 
-                value="${escapeHtml(searchValue)}"
-                placeholder="${searchPlaceholder}"
-              >
-            </div>
-            <button type="submit" class="btn btn-secondary">搜索</button>
-          </form>
-        </div>
-      ` : ''}
-
-      <!-- 表格 -->
-      <div class="card">
-        <div class="table-container">
-          <table class="table crud-data-table" id="crud-${id}-table">
-            <thead>
-              <tr>
-                ${tableFields.map(field => `
-                  <th style="${field.width ? `width: ${field.width}` : ''}">${field.label}</th>
-                `).join('')}
-                ${(canEdit || canDelete || extraActions) ? `
-                  <th class="actions-column">操作</th>
-                ` : ''}
-              </tr>
-            </thead>
-            <tbody id="crud-${id}-tbody">
-              ${data.length > 0 ? data.map(record => renderTableRow(id, record, tableFields, canEdit, canDelete, extraActions)).join('') : `
-                <tr>
-                  <td colspan="${tableFields.length + (canEdit || canDelete || extraActions ? 1 : 0)}">
-                    <div class="empty-state">
-                      ${(0, icons_1.icon)('empty')}
-                      <h3>暂无数据</h3>
-                    </div>
-                  </td>
-                </tr>
-              `}
-            </tbody>
-          </table>
-        </div>
-
-        <!-- 分页 -->
-        ${totalPages > 1 ? `
-          <div class="crud-pagination">
-            <span class="pagination-info">第 ${currentPage} / ${totalPages} 页</span>
-            <div class="pagination">
-              <button 
-                class="pagination-btn" 
-                onclick="CrudTable.goToPage('${id}', ${currentPage - 1})"
-                ${currentPage <= 1 ? 'disabled' : ''}
-              >
-                ${(0, icons_1.icon)('chevronLeft')}
-              </button>
-              ${generatePaginationButtons(id, currentPage, totalPages)}
-              <button 
-                class="pagination-btn" 
-                onclick="CrudTable.goToPage('${id}', ${currentPage + 1})"
-                ${currentPage >= totalPages ? 'disabled' : ''}
-              >
-                ${(0, icons_1.icon)('chevronRight')}
-              </button>
-            </div>
-          </div>
-        ` : ''}
-      </div>
-
-      <!-- 创建模态框 -->
-      <div class="modal-overlay" id="crud-${id}-create-modal">
-        <div class="modal">
-          <div class="modal-header">
-            <h2>${(0, icons_1.icon)('plus')} 添加${title.replace('管理', '')}</h2>
-            <button class="modal-close" onclick="CrudTable.closeModal('crud-${id}-create-modal')">
-              ${(0, icons_1.icon)('close')}
-            </button>
-          </div>
-          <form id="crud-${id}-create-form" onsubmit="CrudTable.create('${id}', event)">
-            <div class="modal-body">
-              <div id="crud-${id}-create-error" class="alert alert-danger" style="display: none;"></div>
-              ${formFields.map(field => renderFormField(id, 'create', field, iconOptions)).join('')}
-            </div>
-            <div class="modal-footer">
-              <button type="button" class="btn btn-secondary" onclick="CrudTable.closeModal('crud-${id}-create-modal')">
-                取消
-              </button>
-              <button type="submit" class="btn btn-success">
-                ${(0, icons_1.icon)('plus')}
-                <span>创建</span>
-              </button>
-            </div>
-          </form>
-        </div>
-      </div>
-
-      <!-- 编辑模态框 -->
-      <div class="modal-overlay" id="crud-${id}-edit-modal">
-        <div class="modal">
-          <div class="modal-header">
-            <h2>${(0, icons_1.icon)('edit')} 编辑${title.replace('管理', '')}</h2>
-            <button class="modal-close" onclick="CrudTable.closeModal('crud-${id}-edit-modal')">
-              ${(0, icons_1.icon)('close')}
-            </button>
-          </div>
-          <form id="crud-${id}-edit-form" onsubmit="CrudTable.update('${id}', event)">
-            <input type="hidden" name="id" id="crud-${id}-edit-id">
-            <div class="modal-body">
-              <div id="crud-${id}-edit-error" class="alert alert-danger" style="display: none;"></div>
-              ${formFields.map(field => renderFormField(id, 'edit', field, iconOptions)).join('')}
-            </div>
-            <div class="modal-footer">
-              <button type="button" class="btn btn-secondary" onclick="CrudTable.closeModal('crud-${id}-edit-modal')">
-                取消
-              </button>
-              <button type="submit" class="btn btn-primary">
-                ${(0, icons_1.icon)('save')}
-                <span>保存</span>
-              </button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
+    })}'>
+      <!-- 头部 -->
+      <div class="crud-header">
+        <div class="crud-title">
+          ${iconName ? (0, icons_1.icon)(iconName) : ''}
+          <h1>${title}</h1>
+          <span class="crud-count">共 ${total} 条记录</span>
+        </div>
+        <div class="crud-actions">
+          ${canCreate ? `
+            <button class="btn btn-success" onclick="CrudTable.showCreate('${id}')">
+              ${(0, icons_1.icon)('plus')}
+              <span>添加</span>
+            </button>
+          ` : ''}
+          ${canRefresh ? `
+            <button class="btn btn-primary" onclick="CrudTable.refresh('${id}')">
+              ${(0, icons_1.icon)('refresh')}
+              <span>刷新</span>
+            </button>
+          ` : ''}
+        </div>
+      </div>
+
+      <!-- 搜索栏 -->
+      ${canSearch ? `
+        <div class="crud-search">
+          <form onsubmit="CrudTable.search('${id}', event)">
+            <div class="search-box">
+              ${(0, icons_1.icon)('search')}
+              <input 
+                type="text" 
+                id="crud-${id}-search" 
+                value="${escapeHtml(searchValue)}"
+                placeholder="${searchPlaceholder}"
+              >
+            </div>
+            <button type="submit" class="btn btn-secondary">搜索</button>
+          </form>
+        </div>
+      ` : ''}
+
+      <!-- 表格 -->
+      <div class="card">
+        <div class="table-container">
+          <table class="table crud-data-table" id="crud-${id}-table">
+            <thead>
+              <tr>
+                ${tableFields.map(field => `
+                  <th style="${field.width ? `width: ${field.width}` : ''}">${field.label}</th>
+                `).join('')}
+                ${(canEdit || canDelete || extraActions) ? `
+                  <th class="actions-column">操作</th>
+                ` : ''}
+              </tr>
+            </thead>
+            <tbody id="crud-${id}-tbody">
+              ${data.length > 0 ? data.map(record => renderTableRow(id, record, tableFields, canEdit, canDelete, extraActions)).join('') : `
+                <tr>
+                  <td colspan="${tableFields.length + (canEdit || canDelete || extraActions ? 1 : 0)}">
+                    <div class="empty-state">
+                      ${(0, icons_1.icon)('empty')}
+                      <h3>暂无数据</h3>
+                    </div>
+                  </td>
+                </tr>
+              `}
+            </tbody>
+          </table>
+        </div>
+
+        <!-- 分页 -->
+        ${totalPages > 1 ? `
+          <div class="crud-pagination">
+            <span class="pagination-info">第 ${currentPage} / ${totalPages} 页</span>
+            <div class="pagination">
+              <button 
+                class="pagination-btn" 
+                onclick="CrudTable.goToPage('${id}', ${currentPage - 1})"
+                ${currentPage <= 1 ? 'disabled' : ''}
+              >
+                ${(0, icons_1.icon)('chevronLeft')}
+              </button>
+              ${generatePaginationButtons(id, currentPage, totalPages)}
+              <button 
+                class="pagination-btn" 
+                onclick="CrudTable.goToPage('${id}', ${currentPage + 1})"
+                ${currentPage >= totalPages ? 'disabled' : ''}
+              >
+                ${(0, icons_1.icon)('chevronRight')}
+              </button>
+            </div>
+          </div>
+        ` : ''}
+      </div>
+
+      <!-- 创建模态框 -->
+      <div class="modal-overlay" id="crud-${id}-create-modal">
+        <div class="modal">
+          <div class="modal-header">
+            <h2>${(0, icons_1.icon)('plus')} 添加${title.replace('管理', '')}</h2>
+            <button class="modal-close" onclick="CrudTable.closeModal('crud-${id}-create-modal')">
+              ${(0, icons_1.icon)('close')}
+            </button>
+          </div>
+          <form id="crud-${id}-create-form" onsubmit="CrudTable.create('${id}', event)">
+            <div class="modal-body">
+              <div id="crud-${id}-create-error" class="alert alert-danger" style="display: none;"></div>
+              ${formFields.map(field => renderFormField(id, 'create', field, iconOptions)).join('')}
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-secondary" onclick="CrudTable.closeModal('crud-${id}-create-modal')">
+                取消
+              </button>
+              <button type="submit" class="btn btn-success">
+                ${(0, icons_1.icon)('plus')}
+                <span>创建</span>
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <!-- 编辑模态框 -->
+      <div class="modal-overlay" id="crud-${id}-edit-modal">
+        <div class="modal">
+          <div class="modal-header">
+            <h2>${(0, icons_1.icon)('edit')} 编辑${title.replace('管理', '')}</h2>
+            <button class="modal-close" onclick="CrudTable.closeModal('crud-${id}-edit-modal')">
+              ${(0, icons_1.icon)('close')}
+            </button>
+          </div>
+          <form id="crud-${id}-edit-form" onsubmit="CrudTable.update('${id}', event)">
+            <input type="hidden" name="id" id="crud-${id}-edit-id">
+            <div class="modal-body">
+              <div id="crud-${id}-edit-error" class="alert alert-danger" style="display: none;"></div>
+              ${formFields.map(field => renderFormField(id, 'edit', field, iconOptions)).join('')}
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-secondary" onclick="CrudTable.closeModal('crud-${id}-edit-modal')">
+                取消
+              </button>
+              <button type="submit" class="btn btn-primary">
+                ${(0, icons_1.icon)('save')}
+                <span>保存</span>
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
   `;
 }
 /**
  * 渲染表格行
  */
 function renderTableRow(tableId, record, fields, canEdit, canDelete, extraActions) {
-    return `
-    <tr data-id="${record.id}">
+    return `
+    <tr data-id="${record.id}">
       ${fields.map(field => {
         const value = record[field.key];
         let displayValue;
@@ -211,25 +211,25 @@ function renderTableRow(tableId, record, fields, canEdit, canDelete, extraAction
             displayValue = escapeHtml(String(value || '-'));
         }
         return `<td class="${field.width ? 'truncate' : ''}" style="${field.width ? `max-width: ${field.width}` : ''}">${displayValue}</td>`;
-    }).join('')}
-      ${(canEdit || canDelete || extraActions) ? `
-        <td class="actions-cell">
-          <div class="flex gap-2">
-            ${extraActions}
-            ${canEdit ? `
-              <button class="btn btn-secondary btn-sm btn-icon" onclick="CrudTable.showEdit('${tableId}', '${record.id}')" title="编辑">
-                ${(0, icons_1.icon)('edit')}
-              </button>
-            ` : ''}
-            ${canDelete ? `
-              <button class="btn btn-danger btn-sm btn-icon" onclick="CrudTable.confirmDelete('${tableId}', '${record.id}')" title="删除">
-                ${(0, icons_1.icon)('trash')}
-              </button>
-            ` : ''}
-          </div>
-        </td>
-      ` : ''}
-    </tr>
+    }).join('')}
+      ${(canEdit || canDelete || extraActions) ? `
+        <td class="actions-cell">
+          <div class="flex gap-2">
+            ${extraActions}
+            ${canEdit ? `
+              <button class="btn btn-secondary btn-sm btn-icon" onclick="CrudTable.showEdit('${tableId}', '${record.id}')" title="编辑">
+                ${(0, icons_1.icon)('edit')}
+              </button>
+            ` : ''}
+            ${canDelete ? `
+              <button class="btn btn-danger btn-sm btn-icon" onclick="CrudTable.confirmDelete('${tableId}', '${record.id}')" title="删除">
+                ${(0, icons_1.icon)('trash')}
+              </button>
+            ` : ''}
+          </div>
+        </td>
+      ` : ''}
+    </tr>
   `;
 }
 /**
@@ -243,111 +243,111 @@ function renderFormField(tableId, formType, field, iconOptions) {
     let inputHtml;
     switch (field.type) {
         case 'select':
-            inputHtml = `
-        <select class="form-select" id="${inputId}" name="${inputName}" ${isRequired}>
-          ${field.options?.map(opt => `
-            <option value="${opt.value}">${opt.label}</option>
-          `).join('')}
-        </select>
+            inputHtml = `
+        <select class="form-select" id="${inputId}" name="${inputName}" ${isRequired}>
+          ${field.options?.map(opt => `
+            <option value="${opt.value}">${opt.label}</option>
+          `).join('')}
+        </select>
       `;
             break;
         case 'textarea':
-            inputHtml = `
-        <textarea 
-          class="form-textarea" 
-          id="${inputId}" 
-          name="${inputName}" 
-          placeholder="${placeholder}"
-          ${isRequired}
-        ></textarea>
+            inputHtml = `
+        <textarea 
+          class="form-textarea" 
+          id="${inputId}" 
+          name="${inputName}" 
+          placeholder="${placeholder}"
+          ${isRequired}
+        ></textarea>
       `;
             break;
         case 'icon':
-            inputHtml = `
-        <div class="icon-picker" id="${inputId}-picker">
-          <input type="hidden" id="${inputId}" name="${inputName}" value="${iconOptions[0]}">
-          <div class="icon-options">
-            ${iconOptions.map((ico, idx) => `
-              <button 
-                type="button" 
-                class="icon-option ${idx === 0 ? 'selected' : ''}" 
-                data-icon="${ico}"
-                onclick="CrudTable.selectIcon('${inputId}', '${ico}', this)"
-              >
-                ${ico}
-              </button>
-            `).join('')}
-          </div>
-        </div>
+            inputHtml = `
+        <div class="icon-picker" id="${inputId}-picker">
+          <input type="hidden" id="${inputId}" name="${inputName}" value="${iconOptions[0]}">
+          <div class="icon-options">
+            ${iconOptions.map((ico, idx) => `
+              <button 
+                type="button" 
+                class="icon-option ${idx === 0 ? 'selected' : ''}" 
+                data-icon="${ico}"
+                onclick="CrudTable.selectIcon('${inputId}', '${ico}', this)"
+              >
+                ${ico}
+              </button>
+            `).join('')}
+          </div>
+        </div>
       `;
             break;
         case 'number':
-            inputHtml = `
-        <input 
-          type="number" 
-          class="form-input" 
-          id="${inputId}" 
-          name="${inputName}" 
-          placeholder="${placeholder}"
-          ${isRequired}
-        >
+            inputHtml = `
+        <input 
+          type="number" 
+          class="form-input" 
+          id="${inputId}" 
+          name="${inputName}" 
+          placeholder="${placeholder}"
+          ${isRequired}
+        >
       `;
             break;
         case 'email':
-            inputHtml = `
-        <input 
-          type="email" 
-          class="form-input" 
-          id="${inputId}" 
-          name="${inputName}" 
-          placeholder="${placeholder}"
-          ${isRequired}
-        >
+            inputHtml = `
+        <input 
+          type="email" 
+          class="form-input" 
+          id="${inputId}" 
+          name="${inputName}" 
+          placeholder="${placeholder}"
+          ${isRequired}
+        >
       `;
             break;
         case 'password':
-            inputHtml = `
-        <input 
-          type="password" 
-          class="form-input" 
-          id="${inputId}" 
-          name="${inputName}" 
-          placeholder="${placeholder}"
-          ${isRequired}
-        >
+            inputHtml = `
+        <input 
+          type="password" 
+          class="form-input" 
+          id="${inputId}" 
+          name="${inputName}" 
+          placeholder="${placeholder}"
+          ${isRequired}
+        >
       `;
             break;
         case 'date':
-            inputHtml = `
-        <input 
-          type="datetime-local" 
-          class="form-input" 
-          id="${inputId}" 
-          name="${inputName}"
-          ${isRequired}
-        >
+            inputHtml = `
+        <input 
+          type="datetime-local" 
+          class="form-input" 
+          id="${inputId}" 
+          name="${inputName}"
+          ${isRequired}
+        >
       `;
             break;
         default:
-            inputHtml = `
-        <input 
-          type="text" 
-          class="form-input" 
-          id="${inputId}" 
-          name="${inputName}" 
-          placeholder="${placeholder}"
-          ${isRequired}
-        >
+            inputHtml = `
+        <input 
+          type="text" 
+          class="form-input" 
+          id="${inputId}" 
+          name="${inputName}" 
+          placeholder="${placeholder}"
+          ${isRequired}
+        >
       `;
     }
-    return `
-    <div class="form-group">
-      <label class="form-label" for="${inputId}">
-        ${field.label}
-        ${field.required ? '<span class="required">*</span>' : ''}
-      </label>
-      ${inputHtml}
-    </div>
+    return `
+    <div class="form-group">
+      <label class="form-label" for="${inputId}">
+        ${field.label}
+        ${field.required ? '<span class="required">*</span>' : ''}
+      </label>
+      ${inputHtml}
+    </div>
   `;
 }
 /**
@@ -362,13 +362,13 @@ function generatePaginationButtons(tableId, current, total) {
         start = Math.max(1, end - maxButtons + 1);
     }
     for (let i = start; i <= end; i++) {
-        buttons.push(`
-      <button 
-        class="pagination-btn ${i === current ? 'active' : ''}" 
-        onclick="CrudTable.goToPage('${tableId}', ${i})"
-      >
-        ${i}
-      </button>
+        buttons.push(`
+      <button 
+        class="pagination-btn ${i === current ? 'active' : ''}" 
+        onclick="CrudTable.goToPage('${tableId}', ${i})"
+      >
+        ${i}
+      </button>
     `);
     }
     return buttons.join('');
@@ -419,353 +419,353 @@ function getBadgeClass(value) {
  * 获取 CrudTable 客户端脚本
  */
 function getCrudTableScript() {
-    return `
-    // CrudTable 全局对象
-    window.CrudTable = {
-      // 存储表格配置
-      configs: {},
-      
-      // 初始化表格
-      init: function(tableId, config) {
-        this.configs[tableId] = config;
-      },
-      
-      // 显示创建模态框
-      showCreate: function(tableId) {
-        const modal = document.getElementById('crud-' + tableId + '-create-modal');
-        const form = document.getElementById('crud-' + tableId + '-create-form');
-        if (form) form.reset();
-        this.hideError(tableId, 'create');
-        modal.classList.add('active');
-      },
-      
-      // 显示编辑模态框
-      showEdit: function(tableId, recordId) {
-        const modal = document.getElementById('crud-' + tableId + '-edit-modal');
-        const idInput = document.getElementById('crud-' + tableId + '-edit-id');
-        idInput.value = recordId;
-        
-        // 获取当前行数据填充表单
-        const row = document.querySelector('#crud-' + tableId + '-tbody tr[data-id="' + recordId + '"]');
-        if (row) {
-          // 从服务器获取数据并填充表单
-          this.loadRecordData(tableId, recordId);
-        }
-        
-        this.hideError(tableId, 'edit');
-        modal.classList.add('active');
-      },
-      
-      // 加载记录数据
-      loadRecordData: async function(tableId, recordId) {
-        try {
-          const res = await fetch('/api/v1/admin/' + tableId + '/' + recordId);
-          if (res.ok) {
-            const data = await res.json();
-            if (data.data) {
-              this.fillForm(tableId, 'edit', data.data);
-            }
-          }
-        } catch (err) {
-          console.error('Failed to load record:', err);
-        }
-      },
-      
-      // 填充表单
-      fillForm: function(tableId, formType, data) {
-        Object.keys(data).forEach(function(key) {
-          const input = document.getElementById('crud-' + tableId + '-' + formType + '-' + key);
-          if (input) {
-            if (input.type === 'hidden' && input.closest('.icon-picker')) {
-              // 图标选择器
-              input.value = data[key];
-              const options = input.parentElement.querySelectorAll('.icon-option');
-              options.forEach(function(opt) {
-                opt.classList.toggle('selected', opt.dataset.icon === data[key]);
-              });
-            } else {
-              input.value = data[key] || '';
-            }
-          }
-        });
-      },
-      
-      // 关闭模态框
-      closeModal: function(modalId) {
-        document.getElementById(modalId).classList.remove('active');
-      },
-      
-      // 创建记录
-      create: async function(tableId, event) {
-        event.preventDefault();
-        const form = event.target;
-        const formData = new FormData(form);
-        const data = Object.fromEntries(formData.entries());
-        
-        try {
-          const res = await fetch('/api/v1/admin/' + tableId, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(data)
-          });
-          
-          if (res.ok) {
-            this.closeModal('crud-' + tableId + '-create-modal');
-            this.refresh(tableId);
-          } else {
-            const err = await res.json();
-            this.showError(tableId, 'create', err.message || '创建失败');
-          }
-        } catch (err) {
-          this.showError(tableId, 'create', '请求失败: ' + err.message);
-        }
-      },
-      
-      // 更新记录
-      update: async function(tableId, event) {
-        event.preventDefault();
-        const form = event.target;
-        const formData = new FormData(form);
-        const data = Object.fromEntries(formData.entries());
-        const id = data.id;
-        delete data.id;
-        
-        try {
-          const res = await fetch('/api/v1/admin/' + tableId + '/' + id, {
-            method: 'PUT',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(data)
-          });
-          
-          if (res.ok) {
-            this.closeModal('crud-' + tableId + '-edit-modal');
-            this.refresh(tableId);
-          } else {
-            const err = await res.json();
-            this.showError(tableId, 'edit', err.message || '更新失败');
-          }
-        } catch (err) {
-          this.showError(tableId, 'edit', '请求失败: ' + err.message);
-        }
-      },
-      
-      // 确认删除
-      confirmDelete: async function(tableId, recordId) {
-        const config = this.configs[tableId] || {};
-        const message = config.deleteConfirmMessage || '确定要删除这条记录吗？';
-        
-        if (confirm(message)) {
-          try {
-            const res = await fetch('/api/v1/admin/' + tableId + '/' + recordId, {
-              method: 'DELETE'
-            });
-            
-            if (res.ok) {
-              this.refresh(tableId);
-            } else {
-              const err = await res.json();
-              alert('删除失败: ' + (err.message || '未知错误'));
-            }
-          } catch (err) {
-            alert('请求失败: ' + err.message);
-          }
-        }
-      },
-      
-      // 搜索
-      search: function(tableId, event) {
-        event.preventDefault();
-        const input = document.getElementById('crud-' + tableId + '-search');
-        const query = input.value;
-        const params = new URLSearchParams(window.location.search);
-        params.set('q', query);
-        params.set('page', '1');
-        window.location.search = params.toString();
-      },
-      
-      // 刷新
-      refresh: function(tableId) {
-        window.location.reload();
-      },
-      
-      // 跳转页面
-      goToPage: function(tableId, page) {
-        const params = new URLSearchParams(window.location.search);
-        params.set('page', page);
-        window.location.search = params.toString();
-      },
-      
-      // 选择图标
-      selectIcon: function(inputId, iconValue, button) {
-        const input = document.getElementById(inputId);
-        input.value = iconValue;
-        
-        const options = button.parentElement.querySelectorAll('.icon-option');
-        options.forEach(function(opt) {
-          opt.classList.remove('selected');
-        });
-        button.classList.add('selected');
-      },
-      
-      // 显示错误
-      showError: function(tableId, formType, message) {
-        const errorDiv = document.getElementById('crud-' + tableId + '-' + formType + '-error');
-        if (errorDiv) {
-          errorDiv.textContent = message;
-          errorDiv.style.display = 'flex';
-        }
-      },
-      
-      // 隐藏错误
-      hideError: function(tableId, formType) {
-        const errorDiv = document.getElementById('crud-' + tableId + '-' + formType + '-error');
-        if (errorDiv) {
-          errorDiv.style.display = 'none';
-        }
-      }
-    };
+    return `
+    // CrudTable 全局对象
+    window.CrudTable = {
+      // 存储表格配置
+      configs: {},
+      
+      // 初始化表格
+      init: function(tableId, config) {
+        this.configs[tableId] = config;
+      },
+      
+      // 显示创建模态框
+      showCreate: function(tableId) {
+        const modal = document.getElementById('crud-' + tableId + '-create-modal');
+        const form = document.getElementById('crud-' + tableId + '-create-form');
+        if (form) form.reset();
+        this.hideError(tableId, 'create');
+        modal.classList.add('active');
+      },
+      
+      // 显示编辑模态框
+      showEdit: function(tableId, recordId) {
+        const modal = document.getElementById('crud-' + tableId + '-edit-modal');
+        const idInput = document.getElementById('crud-' + tableId + '-edit-id');
+        idInput.value = recordId;
+        
+        // 获取当前行数据填充表单
+        const row = document.querySelector('#crud-' + tableId + '-tbody tr[data-id="' + recordId + '"]');
+        if (row) {
+          // 从服务器获取数据并填充表单
+          this.loadRecordData(tableId, recordId);
+        }
+        
+        this.hideError(tableId, 'edit');
+        modal.classList.add('active');
+      },
+      
+      // 加载记录数据
+      loadRecordData: async function(tableId, recordId) {
+        try {
+          const res = await fetch('/api/v1/admin/' + tableId + '/' + recordId);
+          if (res.ok) {
+            const data = await res.json();
+            if (data.data) {
+              this.fillForm(tableId, 'edit', data.data);
+            }
+          }
+        } catch (err) {
+          console.error('Failed to load record:', err);
+        }
+      },
+      
+      // 填充表单
+      fillForm: function(tableId, formType, data) {
+        Object.keys(data).forEach(function(key) {
+          const input = document.getElementById('crud-' + tableId + '-' + formType + '-' + key);
+          if (input) {
+            if (input.type === 'hidden' && input.closest('.icon-picker')) {
+              // 图标选择器
+              input.value = data[key];
+              const options = input.parentElement.querySelectorAll('.icon-option');
+              options.forEach(function(opt) {
+                opt.classList.toggle('selected', opt.dataset.icon === data[key]);
+              });
+            } else {
+              input.value = data[key] || '';
+            }
+          }
+        });
+      },
+      
+      // 关闭模态框
+      closeModal: function(modalId) {
+        document.getElementById(modalId).classList.remove('active');
+      },
+      
+      // 创建记录
+      create: async function(tableId, event) {
+        event.preventDefault();
+        const form = event.target;
+        const formData = new FormData(form);
+        const data = Object.fromEntries(formData.entries());
+        
+        try {
+          const res = await fetch('/api/v1/admin/' + tableId, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(data)
+          });
+          
+          if (res.ok) {
+            this.closeModal('crud-' + tableId + '-create-modal');
+            this.refresh(tableId);
+          } else {
+            const err = await res.json();
+            this.showError(tableId, 'create', err.message || '创建失败');
+          }
+        } catch (err) {
+          this.showError(tableId, 'create', '请求失败: ' + err.message);
+        }
+      },
+      
+      // 更新记录
+      update: async function(tableId, event) {
+        event.preventDefault();
+        const form = event.target;
+        const formData = new FormData(form);
+        const data = Object.fromEntries(formData.entries());
+        const id = data.id;
+        delete data.id;
+        
+        try {
+          const res = await fetch('/api/v1/admin/' + tableId + '/' + id, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(data)
+          });
+          
+          if (res.ok) {
+            this.closeModal('crud-' + tableId + '-edit-modal');
+            this.refresh(tableId);
+          } else {
+            const err = await res.json();
+            this.showError(tableId, 'edit', err.message || '更新失败');
+          }
+        } catch (err) {
+          this.showError(tableId, 'edit', '请求失败: ' + err.message);
+        }
+      },
+      
+      // 确认删除
+      confirmDelete: async function(tableId, recordId) {
+        const config = this.configs[tableId] || {};
+        const message = config.deleteConfirmMessage || '确定要删除这条记录吗？';
+        
+        if (confirm(message)) {
+          try {
+            const res = await fetch('/api/v1/admin/' + tableId + '/' + recordId, {
+              method: 'DELETE'
+            });
+            
+            if (res.ok) {
+              this.refresh(tableId);
+            } else {
+              const err = await res.json();
+              alert('删除失败: ' + (err.message || '未知错误'));
+            }
+          } catch (err) {
+            alert('请求失败: ' + err.message);
+          }
+        }
+      },
+      
+      // 搜索
+      search: function(tableId, event) {
+        event.preventDefault();
+        const input = document.getElementById('crud-' + tableId + '-search');
+        const query = input.value;
+        const params = new URLSearchParams(window.location.search);
+        params.set('q', query);
+        params.set('page', '1');
+        window.location.search = params.toString();
+      },
+      
+      // 刷新
+      refresh: function(tableId) {
+        window.location.reload();
+      },
+      
+      // 跳转页面
+      goToPage: function(tableId, page) {
+        const params = new URLSearchParams(window.location.search);
+        params.set('page', page);
+        window.location.search = params.toString();
+      },
+      
+      // 选择图标
+      selectIcon: function(inputId, iconValue, button) {
+        const input = document.getElementById(inputId);
+        input.value = iconValue;
+        
+        const options = button.parentElement.querySelectorAll('.icon-option');
+        options.forEach(function(opt) {
+          opt.classList.remove('selected');
+        });
+        button.classList.add('selected');
+      },
+      
+      // 显示错误
+      showError: function(tableId, formType, message) {
+        const errorDiv = document.getElementById('crud-' + tableId + '-' + formType + '-error');
+        if (errorDiv) {
+          errorDiv.textContent = message;
+          errorDiv.style.display = 'flex';
+        }
+      },
+      
+      // 隐藏错误
+      hideError: function(tableId, formType) {
+        const errorDiv = document.getElementById('crud-' + tableId + '-' + formType + '-error');
+        if (errorDiv) {
+          errorDiv.style.display = 'none';
+        }
+      }
+    };
   `;
 }
 /**
  * 获取 CrudTable 专用样式
  */
 function getCrudTableStyles() {
-    return `
-    /* CrudTable 专用样式 */
-    .crud-table {
-      margin-bottom: 24px;
-    }
-    
-    .crud-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 20px;
-    }
-    
-    .crud-title {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-    }
-    
-    .crud-title svg {
-      width: 28px;
-      height: 28px;
-      color: var(--primary);
-    }
-    
-    .crud-title h1 {
-      font-size: 24px;
-      font-weight: 600;
-      color: var(--text-primary);
-      margin: 0;
-    }
-    
-    .crud-count {
-      font-size: 14px;
-      color: var(--text-muted);
-      background: var(--bg-dark);
-      padding: 4px 12px;
-      border-radius: 20px;
-    }
-    
-    .crud-actions {
-      display: flex;
-      gap: 12px;
-    }
-    
-    .crud-search {
-      margin-bottom: 20px;
-    }
-    
-    .crud-search form {
-      display: flex;
-      gap: 12px;
-      max-width: 500px;
-    }
-    
-    .crud-search .search-box {
-      flex: 1;
-    }
-    
-    .crud-pagination {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 16px 20px;
-      border-top: 1px solid var(--border-color);
-    }
-    
-    .actions-column {
-      width: 120px;
-      text-align: right;
-    }
-    
-    .actions-cell {
-      text-align: right;
-    }
-    
-    /* 按钮颜色扩展 */
-    .btn-success {
-      background: var(--success);
-      color: white;
-    }
-    
-    .btn-success:hover {
-      background: #16a34a;
-    }
-    
-    /* 图标选择器样式 */
-    .icon-picker {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-    }
-    
-    .icon-options {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-    }
-    
-    .icon-option {
-      width: 40px;
-      height: 40px;
-      font-size: 20px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border: 2px solid var(--border-color);
-      border-radius: var(--border-radius);
-      background: var(--bg-dark);
-      cursor: pointer;
-      transition: var(--transition);
-    }
-    
-    .icon-option:hover {
-      border-color: var(--text-muted);
-    }
-    
-    .icon-option.selected {
-      border-color: var(--primary);
-      background: rgba(99, 102, 241, 0.2);
-    }
-    
-    .icon-display {
-      font-size: 20px;
-    }
-    
-    /* 必填标记 */
-    .required {
-      color: var(--danger);
-      margin-left: 4px;
-    }
-    
-    /* 保存图标 */
-    .btn svg {
-      flex-shrink: 0;
-    }
+    return `
+    /* CrudTable 专用样式 */
+    .crud-table {
+      margin-bottom: 24px;
+    }
+    
+    .crud-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+    }
+    
+    .crud-title {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    
+    .crud-title svg {
+      width: 28px;
+      height: 28px;
+      color: var(--primary);
+    }
+    
+    .crud-title h1 {
+      font-size: 24px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin: 0;
+    }
+    
+    .crud-count {
+      font-size: 14px;
+      color: var(--text-muted);
+      background: var(--bg-dark);
+      padding: 4px 12px;
+      border-radius: 20px;
+    }
+    
+    .crud-actions {
+      display: flex;
+      gap: 12px;
+    }
+    
+    .crud-search {
+      margin-bottom: 20px;
+    }
+    
+    .crud-search form {
+      display: flex;
+      gap: 12px;
+      max-width: 500px;
+    }
+    
+    .crud-search .search-box {
+      flex: 1;
+    }
+    
+    .crud-pagination {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px 20px;
+      border-top: 1px solid var(--border-color);
+    }
+    
+    .actions-column {
+      width: 120px;
+      text-align: right;
+    }
+    
+    .actions-cell {
+      text-align: right;
+    }
+    
+    /* 按钮颜色扩展 */
+    .btn-success {
+      background: var(--success);
+      color: white;
+    }
+    
+    .btn-success:hover {
+      background: #16a34a;
+    }
+    
+    /* 图标选择器样式 */
+    .icon-picker {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    
+    .icon-options {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+    
+    .icon-option {
+      width: 40px;
+      height: 40px;
+      font-size: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 2px solid var(--border-color);
+      border-radius: var(--border-radius);
+      background: var(--bg-dark);
+      cursor: pointer;
+      transition: var(--transition);
+    }
+    
+    .icon-option:hover {
+      border-color: var(--text-muted);
+    }
+    
+    .icon-option.selected {
+      border-color: var(--primary);
+      background: rgba(99, 102, 241, 0.2);
+    }
+    
+    .icon-display {
+      font-size: 20px;
+    }
+    
+    /* 必填标记 */
+    .required {
+      color: var(--danger);
+      margin-left: 4px;
+    }
+    
+    /* 保存图标 */
+    .btn svg {
+      flex-shrink: 0;
+    }
   `;
 }
 //# sourceMappingURL=crud-table.js.map