diff --git a/src/Extensions/Senparc.Xncf.AgentsManager/Areas/Admin/Pages/AgentsManager/Index.cshtml b/src/Extensions/Senparc.Xncf.AgentsManager/Areas/Admin/Pages/AgentsManager/Index.cshtml
index d0d1ba497..b1f4ec2a8 100644
--- a/src/Extensions/Senparc.Xncf.AgentsManager/Areas/Admin/Pages/AgentsManager/Index.cshtml
+++ b/src/Extensions/Senparc.Xncf.AgentsManager/Areas/Admin/Pages/AgentsManager/Index.cshtml
@@ -81,7 +81,10 @@
                 <template v-if="scrollbarAgentIndex === ''">
                     <el-scrollbar class="sidebar-agent-container" wrap-class="scrollbar-wrapper">
                         <div ref="agentElListBox" class="agent-listWrap">
-                            <div v-for="(aitem,aindex) in agentList" :key="aindex" class="agent-cardBox">
+                            <div v-for="(aitem,aindex) in agentList" :key="aindex" class="agent-cardBox"
+                                draggable="true"
+                                @@dragstart="handleAgentDragStart(aitem)"
+                                @@dragend="handleAgentDragEnd">
                                 <div class="agentCard-statebox" :class="[getStatusColor(aitem,'1')]">
                                     {{ getStatusText(aitem,'1') }}
                                 </div>
@@ -1103,6 +1106,33 @@
     </el-tab-pane>
 </el-tabs>
 
+@* 拖放覆盖层 - 将智能体拖入组 *@
+<div v-if="isDraggingAgent" class="drag-drop-overlay" @@dragover.prevent @@drop.prevent>
+    <div class="drag-drop-overlay-header">
+        <i class="fas fa-hand-holding"></i>
+        将 <strong>{{ draggingAgentData && draggingAgentData.name }}</strong> 拖放到组中
+    </div>
+    <div class="drag-drop-overlay-list">
+        <template v-if="groupList && groupList.length > 0">
+            <div v-for="group in groupList" :key="group.id"
+                class="drag-drop-group-item"
+                :class="{'drag-drop-group-hover': dragOverGroupId === group.id}"
+                @@dragover.prevent="handleGroupDropZoneOver(group.id)"
+                @@dragleave="handleGroupDropZoneLeave"
+                @@drop.prevent="handleAgentDropToGroup(group)">
+                <i class="fas fa-users" style="margin-right:6px;"></i>
+                <span class="drag-drop-group-name text-ellipsis">{{ group.name }}</span>
+                <span class="drag-drop-group-count">{{ group.numberTasks || 0 }} 个任务</span>
+            </div>
+        </template>
+        <div v-else class="drag-drop-empty">
+            <i class="el-icon-warning-outline"></i>
+            暂无可用组，请先创建组
+        </div>
+    </div>
+    <div class="drag-drop-overlay-footer">拖到组名称上方释放即可加入</div>
+</div>
+
 @* 抽屉 新增|编辑 智能体 540px *@
 <el-drawer :visible.sync="visible.drawerAgent" direction="rtl" :with-header="false" :wrapper-closable="false"
     :close-on-press-escape="false" size="960px">
diff --git a/src/Extensions/Senparc.Xncf.AgentsManager/OHS/Local/AppService/ChatGroupAppService.cs b/src/Extensions/Senparc.Xncf.AgentsManager/OHS/Local/AppService/ChatGroupAppService.cs
index 3c5516531..822fa8bf5 100644
--- a/src/Extensions/Senparc.Xncf.AgentsManager/OHS/Local/AppService/ChatGroupAppService.cs
+++ b/src/Extensions/Senparc.Xncf.AgentsManager/OHS/Local/AppService/ChatGroupAppService.cs
@@ -5,6 +5,7 @@
 using Senparc.Ncf.Core.AppServices;
 using Senparc.Ncf.Core.Exceptions;
 using Senparc.Ncf.Utility;
+using Senparc.Ncf.XncfBase;
 using Senparc.Xncf.AgentsManager.Domain.Services;
 using Senparc.Xncf.AgentsManager.Models.DatabaseModel.Models;
 using Senparc.Xncf.AgentsManager.Models.DatabaseModel.Models.Dto;
@@ -15,6 +16,7 @@
 using System;
 using System.Collections.Generic;
 using System.Linq;
+using System.Text;
 using System.Threading.Tasks;
 
 namespace Senparc.Xncf.AgentsManager.OHS.Local.AppService
@@ -316,5 +318,138 @@ public async Task<AppResponseBase<string>> RunGroup(ChatGroup_RunGroupRequest re
 
             });
         }
+
+        /// <summary>
+        /// 快速组建团队并立即执行任务
+        /// </summary>
+        /// <param name="request"></param>
+        /// <returns></returns>
+        [FunctionRender("快速组建团队并执行任务", "快速选择成员，组建临时团队，并立即执行指定任务", typeof(Register))]
+        public async Task<StringAppResponse> QuickTeamAndRun(ChatGroup_QuickTeamRequest request)
+        {
+            return await this.GetStringResponseAsync(async (response, logger) =>
+            {
+                if (!request.Members.SelectedValues.Any())
+                {
+                    return "至少需要选择一名成员！";
+                }
+
+                if (!int.TryParse(request.Admin.SelectedValues.FirstOrDefault(), out int adminId))
+                {
+                    return "必须选择一位群主！";
+                }
+
+                if (!int.TryParse(request.EnterAgent.SelectedValues.FirstOrDefault(), out int enterAgentId))
+                {
+                    return "必须选择一位对接人！";
+                }
+
+                if (string.IsNullOrWhiteSpace(request.Command))
+                {
+                    return "任务描述不能为空！";
+                }
+
+                // 创建团队名称
+                var teamName = string.IsNullOrWhiteSpace(request.TeamName)
+                    ? $"快速团队-{DateTime.Now:yyyyMMddHHmmss}"
+                    : request.TeamName;
+
+                // 创建新的 ChatGroup
+                var chatGroupDto = new ChatGroupDto(teamName, true, ChatGroupState.Unstart, "通过快速组建功能创建", adminId, enterAgentId);
+                var chatGroup = new ChatGroup(chatGroupDto);
+                await _chatGroupService.SaveObjectAsync(chatGroup);
+                logger.Append($"团队 [{teamName}] 创建成功！");
+
+                // 添加成员（合并对接人到成员列表）
+                var memberIdList = request.Members.SelectedValues.Select(z => int.Parse(z)).ToList();
+                if (!memberIdList.Contains(enterAgentId))
+                {
+                    memberIdList.Add(enterAgentId);
+                }
+
+                var memberList = new List<ChatGroupMember>();
+                foreach (var agentId in memberIdList)
+                {
+                    var chatGroupMemberDto = new ChatGroupMemberDto(null, chatGroup.Id, agentId);
+                    var member = new ChatGroupMember(chatGroupMemberDto);
+                    member.ResetUID();
+                    memberList.Add(member);
+                }
+                await _chatGroupMemeberService.SaveObjectListAsync(memberList);
+                logger.Append($"已添加 {memberList.Count} 名成员！");
+
+                // 确定 AI 模型设置
+                var aiModelSelected = request.AIModel.SelectedValues.FirstOrDefault();
+                var aiSetting = Senparc.AI.Config.SenparcAiSetting;
+                if (!string.IsNullOrEmpty(aiModelSelected) && aiModelSelected != "Default")
+                {
+                    int.TryParse(aiModelSelected, out int aiModelId);
+                    var aiModel = await _aIModelService.GetObjectAsync(z => z.Id == aiModelId);
+                    if (aiModel == null)
+                    {
+                        throw new NcfExceptionBase($"当前选择的 AI 模型不存在：{aiModelSelected}");
+                    }
+                    var aiModelDto = _aIModelService.Mapper.Map<AIModelDto>(aiModel);
+                    aiSetting = _aIModelService.BuildSenparcAiSetting(aiModelDto);
+                }
+
+                // 执行任务
+                logger.Append($"开始执行任务：{request.Command}");
+                var runTask = _chatGroupService.RunChatGroup(logger, chatGroup.Id, request.Command, aiSetting, false);
+                Task.WaitAll(new[] { (Task)runTask });
+
+                return logger.ToString();
+            });
+        }
+
+        /// <summary>
+        /// 获取可用的 XNCF 模块列表（用于 AI Chat 自动附加模块功能）
+        /// </summary>
+        /// <param name="request"></param>
+        /// <returns></returns>
+        [FunctionRender("获取可用 XNCF 模块", "列举系统中所有已注册的 XNCF 模块及其可用功能，可用于 AI Chat 自动附加模块功能", typeof(Register))]
+        public async Task<StringAppResponse> GetAvailableXncfModules(ChatGroup_GetAvailableXncfModulesRequest request)
+        {
+            return await this.GetStringResponseAsync(async (response, logger) =>
+            {
+                var registers = XncfRegisterManager.RegisterList;
+                if (!registers.Any())
+                {
+                    return "当前没有已注册的 XNCF 模块。";
+                }
+
+                var sb = new StringBuilder();
+                sb.AppendLine($"共发现 {registers.Count} 个 XNCF 模块：");
+                sb.AppendLine();
+
+                foreach (var register in registers)
+                {
+                    sb.AppendLine($"【{register.Name}】");
+                    sb.AppendLine($"  UID: {register.Uid}");
+                    sb.AppendLine($"  版本: {register.Version}");
+                    if (!string.IsNullOrEmpty(register.Description))
+                    {
+                        sb.AppendLine($"  描述: {register.Description}");
+                    }
+
+                    if (Senparc.Ncf.XncfBase.Register.FunctionRenderCollection.TryGetValue(register.GetType(), out var functionGroup)
+                        && functionGroup != null && functionGroup.Count > 0)
+                    {
+                        sb.AppendLine($"  可用功能 ({functionGroup.Count} 个):");
+                        foreach (var function in functionGroup)
+                        {
+                            sb.AppendLine($"    - {function.Value.FunctionRenderAttribute.Name}: {function.Value.FunctionRenderAttribute.Description}");
+                        }
+                    }
+                    else
+                    {
+                        sb.AppendLine("  可用功能: 无");
+                    }
+                    sb.AppendLine();
+                }
+
+                return sb.ToString().Replace("\r\n", "<br />").Replace("\n", "<br />");
+            });
+        }
     }
 }
diff --git a/src/Extensions/Senparc.Xncf.AgentsManager/OHS/Local/PL/ChatGroupRequest.cs b/src/Extensions/Senparc.Xncf.AgentsManager/OHS/Local/PL/ChatGroupRequest.cs
index 7a55e35c7..c507e6743 100644
--- a/src/Extensions/Senparc.Xncf.AgentsManager/OHS/Local/PL/ChatGroupRequest.cs
+++ b/src/Extensions/Senparc.Xncf.AgentsManager/OHS/Local/PL/ChatGroupRequest.cs
@@ -156,4 +156,65 @@ public class ChatGroup_RunGroupRequest
         /// </summary>
         public int ChatMaxRound { get; set; } = ChatGroupService.ChatMaxRound;
     }
+
+    /// <summary>
+    /// 快速组建团队并执行任务 Request
+    /// </summary>
+    public class ChatGroup_QuickTeamRequest : FunctionAppRequestBase
+    {
+        [Required]
+        [MaxLength(50)]
+        [Description("团队名称||团队名称（将创建一个临时团队并立即执行任务）")]
+        public string TeamName { get; set; }
+
+        [Required]
+        [Description("团队成员||选择加入团队的成员")]
+        public SelectionList Members { get; set; } = new SelectionList(SelectionType.CheckBoxList, new List<SelectionItem>());
+
+        [Required]
+        [Description("群主||群管理员，通常负责协调和管理团队，不参与显式发言")]
+        public SelectionList Admin { get; set; } = new SelectionList(SelectionType.DropDownList, new List<SelectionItem>());
+
+        [Required]
+        [Description("对接人||对接人，即接受命令的人，通常也是期待返回期望结果的人，会自动加入成员列表")]
+        public SelectionList EnterAgent { get; set; } = new SelectionList(SelectionType.DropDownList, new List<SelectionItem>());
+
+        [Description("AI 模型||请选择运行此程序的外围 AI 模型")]
+        public SelectionList AIModel { get; set; } = new SelectionList(SelectionType.DropDownList, new List<SelectionItem>());
+
+        [Required]
+        [MaxLength(500)]
+        [Description("任务描述||说明需要团队协助完成的工作内容")]
+        public string Command { get; set; }
+
+        public override async Task LoadData(IServiceProvider serviceProvider)
+        {
+            var agentTemplateService = serviceProvider.GetService<AgentsTemplateService>();
+            var agentsTemplates = await agentTemplateService.GetFullListAsync(z => z.Enable, z => z.Name, Ncf.Core.Enums.OrderingType.Ascending);
+
+            Members.Items = agentsTemplates.Select(z => new SelectionItem(z.Id.ToString(), z.Name, z.Description)).ToList();
+            Admin.Items = agentsTemplates.Select(z => new SelectionItem(z.Id.ToString(), z.Name, z.Description)).ToList();
+            EnterAgent.Items = agentsTemplates.Select(z => new SelectionItem(z.Id.ToString(), z.Name, z.Description)).ToList();
+
+            var admin = Admin.Items.FirstOrDefault(z => z.Text == "群主");
+            if (admin != null)
+            {
+                admin.DefaultSelected = true;
+            }
+
+            await BuildXncfRequestHelper.LoadAiModelData(serviceProvider, AIModel);
+            await base.LoadData(serviceProvider);
+        }
+    }
+
+    /// <summary>
+    /// 获取可用 XNCF 模块 Request
+    /// </summary>
+    public class ChatGroup_GetAvailableXncfModulesRequest : FunctionAppRequestBase
+    {
+        public override async Task LoadData(IServiceProvider serviceProvider)
+        {
+            await base.LoadData(serviceProvider);
+        }
+    }
 }
diff --git a/src/Extensions/Senparc.Xncf.AgentsManager/wwwroot/css/AgentsManager/index.css b/src/Extensions/Senparc.Xncf.AgentsManager/wwwroot/css/AgentsManager/index.css
index 38e3303a4..728d06c36 100644
--- a/src/Extensions/Senparc.Xncf.AgentsManager/wwwroot/css/AgentsManager/index.css
+++ b/src/Extensions/Senparc.Xncf.AgentsManager/wwwroot/css/AgentsManager/index.css
@@ -1824,4 +1824,117 @@ height:100%;
 .mcp-endpoint-actions {
     display: flex;
     align-items: center;
-}
\ No newline at end of file
+}
+/* 拖放覆盖层样式 - 智能体拖入组 */
+.drag-drop-overlay {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    width: 280px;
+    max-height: 420px;
+    background: rgba(255, 255, 255, 0.98);
+    border: 2px dashed #409EFF;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(64, 158, 255, 0.25);
+    z-index: 9999;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    animation: drag-drop-appear 0.2s ease-out;
+}
+
+@keyframes drag-drop-appear {
+    from { opacity: 0; transform: scale(0.9) translateY(10px); }
+    to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .drag-drop-overlay {
+        animation: none;
+    }
+    .drag-drop-group-hover {
+        transform: none;
+    }
+}
+
+.drag-drop-overlay-header {
+    padding: 12px 14px;
+    background: linear-gradient(135deg, #ecf5ff, #d9ecff);
+    border-bottom: 1px solid #b3d8ff;
+    font-size: 12px;
+    color: #409EFF;
+    line-height: 1.5;
+}
+
+.drag-drop-overlay-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 6px;
+}
+
+.drag-drop-group-item {
+    display: flex;
+    align-items: center;
+    padding: 9px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 13px;
+    border: 2px solid transparent;
+    transition: all 0.15s;
+    margin-bottom: 3px;
+    color: #333;
+}
+
+.drag-drop-group-item:hover,
+.drag-drop-group-hover {
+    background: #ecf5ff;
+    border-color: #409EFF;
+    color: #409EFF;
+}
+
+.drag-drop-group-hover {
+    background: #d9ecff;
+    transform: scale(1.02);
+}
+
+.drag-drop-group-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.drag-drop-group-count {
+    margin-left: 8px;
+    font-size: 11px;
+    color: #909399;
+    white-space: nowrap;
+}
+
+.drag-drop-empty {
+    text-align: center;
+    color: #909399;
+    font-size: 13px;
+    padding: 24px 16px;
+}
+
+.drag-drop-overlay-footer {
+    padding: 8px 14px;
+    background: #f5f7fa;
+    border-top: 1px solid #eee;
+    font-size: 11px;
+    color: #909399;
+    text-align: center;
+}
+
+/* 智能体卡片拖拽状态 */
+.agent-cardBox[draggable="true"] {
+    cursor: grab;
+}
+
+.agent-cardBox[draggable="true"]:active {
+    cursor: grabbing;
+    opacity: 0.8;
+    transform: scale(0.98);
+    box-shadow: 0 8px 24px rgba(64, 158, 255, 0.3);
+}
diff --git a/src/Extensions/Senparc.Xncf.AgentsManager/wwwroot/js/AgentsManager/index.js b/src/Extensions/Senparc.Xncf.AgentsManager/wwwroot/js/AgentsManager/index.js
index 9d84dbd3e..97287c197 100644
--- a/src/Extensions/Senparc.Xncf.AgentsManager/wwwroot/js/AgentsManager/index.js
+++ b/src/Extensions/Senparc.Xncf.AgentsManager/wwwroot/js/AgentsManager/index.js
@@ -390,6 +390,10 @@ var app = new Vue({
       mcpEndpointEditMode: false,
       mcpEndpointOriginalName: '',
       currentMcpTools: [], // 当前查看的MCP工具列表
+      // 拖放相关
+      isDraggingAgent: false,
+      draggingAgentData: null,
+      dragOverGroupId: null,
     };
   },
   computed: {
@@ -2642,6 +2646,91 @@ var app = new Vue({
       }
     },
 
+    // 智能体拖拽开始
+    handleAgentDragStart(agent) {
+      this.isDraggingAgent = true;
+      this.draggingAgentData = agent;
+      // 确保组列表已加载
+      if (!this.groupList || this.groupList.length === 0) {
+        this.getGroupListData('group');
+      }
+    },
+
+    // 智能体拖拽结束
+    handleAgentDragEnd() {
+      this.isDraggingAgent = false;
+      this.draggingAgentData = null;
+      this.dragOverGroupId = null;
+    },
+
+    // 拖放到组区域的 dragover
+    handleGroupDropZoneOver(groupId) {
+      this.dragOverGroupId = groupId;
+    },
+
+    // 离开组区域
+    handleGroupDropZoneLeave() {
+      this.dragOverGroupId = null;
+    },
+
+    // 将智能体拖入组
+    async handleAgentDropToGroup(group) {
+      if (!this.draggingAgentData) return;
+      const agentId = this.draggingAgentData.id;
+      const agentName = this.draggingAgentData.name;
+      const groupName = group.name;
+
+      try {
+        // 获取当前组成员
+        const groupRes = await serviceAM.post(
+          `/api/Senparc.Xncf.AgentsManager/ChatGroupAppService/Xncf.AgentsManager_ChatGroupAppService.GetChatGroupItem?id=${group.id}`
+        );
+
+        if (groupRes.data.success) {
+          const groupDetail = groupRes.data.data;
+          const existingMemberIds = (groupDetail.agentTemplateDtoList || []).map(m => m.id);
+
+          if (existingMemberIds.includes(agentId)) {
+            this.$message.warning(`"${agentName}" 已经是 "${groupName}" 的成员！`);
+            this.isDraggingAgent = false;
+            this.draggingAgentData = null;
+            this.dragOverGroupId = null;
+            return;
+          }
+
+          // 添加智能体到成员列表
+          const newMemberIds = [...existingMemberIds, agentId];
+          const chatGroupDto = groupDetail.chatGroupDto;
+
+          const saveRes = await serviceAM.post(
+            `/api/Senparc.Xncf.AgentsManager/ChatGroupAppService/Xncf.AgentsManager_ChatGroupAppService.SetChatGroup?${getInterfaceQueryStr({ memberAgentTemplateIds: newMemberIds })}`,
+            chatGroupDto
+          );
+
+          if (saveRes.data.success) {
+            this.$message.success(`"${agentName}" 已成功加入 "${groupName}"！`);
+            // 如果当前在组详情页面，刷新组详情
+            if (this.tabsActiveName === 'second') {
+              this.getGroupListData('group');
+            }
+          } else {
+            const errMsg = saveRes.data.errorMessage || '未知错误';
+            this.$message.error(`加入组失败：${errMsg}`);
+          }
+        } else {
+          const errMsg = groupRes.data.errorMessage || '未知错误';
+          this.$message.error(`获取组信息失败：${errMsg}`);
+        }
+      } catch (err) {
+        console.error('拖放操作失败:', err);
+        this.$message.error(`操作失败：${err.message || '请重试或联系管理员'}`);
+      }
+
+      this.isDraggingAgent = false;
+      this.draggingAgentData = null;
+      this.dragOverGroupId = null;
+    },
+
     // 添加插件类型到 functionCallNames
     handleAddPluginType(pluginType) {
       if (!this.agentForm.functionCallNames) {
diff --git a/src/Extensions/Senparc.Xncf.XncfBuilder/Senparc.Xncf.XncfBuilder/Generated/Senparc.Xncf.XncfBuilder.DynamicContentGenerator/MultiFileCodeGenerator/BuildXncfAppService.Generated.cs b/src/Extensions/Senparc.Xncf.XncfBuilder/Senparc.Xncf.XncfBuilder/Generated/Senparc.Xncf.XncfBuilder.DynamicContentGenerator/MultiFileCodeGenerator/BuildXncfAppService.Generated.cs
index fbd7b9527..f09d62519 100644
--- a/src/Extensions/Senparc.Xncf.XncfBuilder/Senparc.Xncf.XncfBuilder/Generated/Senparc.Xncf.XncfBuilder.DynamicContentGenerator/MultiFileCodeGenerator/BuildXncfAppService.Generated.cs
+++ b/src/Extensions/Senparc.Xncf.XncfBuilder/Senparc.Xncf.XncfBuilder/Generated/Senparc.Xncf.XncfBuilder.DynamicContentGenerator/MultiFileCodeGenerator/BuildXncfAppService.Generated.cs
@@ -14,73 +14,73 @@ namespace Senparc.Xncf.XncfBuilder.OHS.Local
     /// </summary>
     public partial class BuildXncfAppService
     {
-public const string BackendTemplate =  @$"
-## Database EntityFramework DbContext class sample
-File Name: Template_XncfNameSenparcEntities.cs
-File Path: <ModuleRootPath>/Domain/Models/DatabaseModel
-Code:
-```csharp
-{SenparcEntitiesTemplate}
-```
-
-## Database Entity class sample
-File Name: Color.cs
-File Path: <ModuleRootPath>/Domain/Models/DatabaseModel
-Code:
-```csharp
-{ColorModelTemplate}
-```
-
-## Database Entity DTO class sample
-File Name: ColorDto.cs
-File Path: <ModuleRootPath>/Domain/Models/DatabaseModel/Dto
-Code:
-```csharp
-{ColorDtoTemplate}
-```
-
-## Service class sample
-File Name: Template_XncfNameService.cs
-File Path: <ModuleRootPath>/Domain/Services
-Code:
-```csharp
-{ColorServiceTemplate}
-```
-";
-
-public const string FrontendTemplate = @$"
-## Page UI sample (front-end)
-File Name: DatabaseSampleIndex.cshtml
-File Path: < ModuleRootPath >/ Areas / Admin / Pages / Template_XncfName
-Code:
-```razorpage
-{DatabaseSampleIndexViewTemplate}
-```
-
-## Page UI sample (back-end)
-File Name: DatabaseSampleIndex.cshtml.cs
-File Path: < ModuleRootPath >/ Areas / Admin / Pages / Template_XncfName
-Code:
-```csharp
-{DatabaseSampleIndexCodeBehindTemplate}
-```
-
-## Page JavaScript file sample
-File Name: databaseSampleIndex.js
-File Path: < ModuleRootPath >/ wwwroot / js / Admin / Template_XncfName
-Code:
-```javascript
-{DatabaseSampleIndexJsTemplate}
-```
-
-## Page CSS file sample
-File Name: databaseSampleIndex.css
-File Path: < ModuleRootPath >/ wwwroot / css / Admin / Template_XncfName
-Code:
-```css
-{DatabaseSampleIndexCssTemplate}
-```
-";
+public const string BackendTemplate =  @$"
+## Database EntityFramework DbContext class sample
+File Name: Template_XncfNameSenparcEntities.cs
+File Path: <ModuleRootPath>/Domain/Models/DatabaseModel
+Code:
+```csharp
+{SenparcEntitiesTemplate}
+```
+
+## Database Entity class sample
+File Name: Color.cs
+File Path: <ModuleRootPath>/Domain/Models/DatabaseModel
+Code:
+```csharp
+{ColorModelTemplate}
+```
+
+## Database Entity DTO class sample
+File Name: ColorDto.cs
+File Path: <ModuleRootPath>/Domain/Models/DatabaseModel/Dto
+Code:
+```csharp
+{ColorDtoTemplate}
+```
+
+## Service class sample
+File Name: Template_XncfNameService.cs
+File Path: <ModuleRootPath>/Domain/Services
+Code:
+```csharp
+{ColorServiceTemplate}
+```
+";
+
+public const string FrontendTemplate = @$"
+## Page UI sample (front-end)
+File Name: DatabaseSampleIndex.cshtml
+File Path: < ModuleRootPath >/ Areas / Admin / Pages / Template_XncfName
+Code:
+```razorpage
+{DatabaseSampleIndexViewTemplate}
+```
+
+## Page UI sample (back-end)
+File Name: DatabaseSampleIndex.cshtml.cs
+File Path: < ModuleRootPath >/ Areas / Admin / Pages / Template_XncfName
+Code:
+```csharp
+{DatabaseSampleIndexCodeBehindTemplate}
+```
+
+## Page JavaScript file sample
+File Name: databaseSampleIndex.js
+File Path: < ModuleRootPath >/ wwwroot / js / Admin / Template_XncfName
+Code:
+```javascript
+{DatabaseSampleIndexJsTemplate}
+```
+
+## Page CSS file sample
+File Name: databaseSampleIndex.css
+File Path: < ModuleRootPath >/ wwwroot / css / Admin / Template_XncfName
+Code:
+```css
+{DatabaseSampleIndexCssTemplate}
+```
+";
 
 
         #region CODE Templates
@@ -89,26 +89,26 @@ public partial class BuildXncfAppService
         /// 请求类代码
         /// 类型: code
         /// </summary>
-        public const string RequestCode = @"using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-
-namespace Senparc.Xncf.XncfBuilder
-{
-    public class Request
-    {
-        public string? Method { get; set; }
-        public string? Path { get; set; }
-        public string? Body { get; set; }
-
-        // 新增字段测试动态更新
-        public Dictionary<string, string>? Headers { get; set; }
-        public DateTime Timestamp { get; set; } = DateTime.Now;
-    }
-
-}
+        public const string RequestCode = @"using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Senparc.Xncf.XncfBuilder
+{
+    public class Request
+    {
+        public string? Method { get; set; }
+        public string? Path { get; set; }
+        public string? Body { get; set; }
+
+        // 新增字段测试动态更新
+        public Dictionary<string, string>? Headers { get; set; }
+        public DateTime Timestamp { get; set; } = DateTime.Now;
+    }
+
+}
 ";
 
         #endregion
@@ -119,237 +119,237 @@ public class Request
         /// Senparc实体类模板
         /// 类型: backend_template
         /// </summary>
-        public const string SenparcEntitiesTemplate = @"using Microsoft.EntityFrameworkCore;
-using Senparc.Ncf.Database;
-using Senparc.Ncf.Core.Models;
-using Senparc.Ncf.XncfBase.Database;
-
-namespace Template_OrgName.Xncf.Template_XncfName.Models
-{
-    public class Template_XncfNameSenparcEntities : XncfDatabaseDbContext
-    {
-        public Template_XncfNameSenparcEntities(DbContextOptions dbContextOptions) : base(dbContextOptions)
-        {
-        }
-
-        public DbSet<Color> Colors { get; set; }
-
-        //DOT REMOVE OR MODIFY THIS LINE 请勿移除或修改本行 - Entities Point
-        //ex. public DbSet<Color> Colors { get; set; }
-
-        //如无特殊需需要，OnModelCreating 方法可以不用写，已经在 Register 中要求注册
-        //protected override void OnModelCreating(ModelBuilder modelBuilder)
-        //{
-        //}
-    }
-}
+        public const string SenparcEntitiesTemplate = @"using Microsoft.EntityFrameworkCore;
+using Senparc.Ncf.Database;
+using Senparc.Ncf.Core.Models;
+using Senparc.Ncf.XncfBase.Database;
+
+namespace Template_OrgName.Xncf.Template_XncfName.Models
+{
+    public class Template_XncfNameSenparcEntities : XncfDatabaseDbContext
+    {
+        public Template_XncfNameSenparcEntities(DbContextOptions dbContextOptions) : base(dbContextOptions)
+        {
+        }
+
+        public DbSet<Color> Colors { get; set; }
+
+        //DOT REMOVE OR MODIFY THIS LINE 请勿移除或修改本行 - Entities Point
+        //ex. public DbSet<Color> Colors { get; set; }
+
+        //如无特殊需需要，OnModelCreating 方法可以不用写，已经在 Register 中要求注册
+        //protected override void OnModelCreating(ModelBuilder modelBuilder)
+        //{
+        //}
+    }
+}
 ";
 
         /// <summary>
         /// 颜色模型模板
         /// 类型: backend_template
         /// </summary>
-        public const string ColorModelTemplate = @"using Senparc.Ncf.Core.Models;
-using Template_OrgName.Xncf.Template_XncfName.Domain.Models.DatabaseModel.Dto;
-using System;
-using System.ComponentModel.DataAnnotations.Schema;
-using Template_OrgName.Xncf.Template_XncfName.Domain.Models.DatabaseModel.Dto;
-
-namespace Template_OrgName.Xncf.Template_XncfName
-{
-    /// <summary>
-    /// Color 实体类
-    /// </summary>
-    [Table(Register.DATABASE_PREFIX + nameof(Color))]//必须添加前缀，防止全系统中发生冲突
-    [Serializable]
-    public class Color : EntityBase<int>
-    {
-        /// <summary>
-        /// 颜色码，0-255
-        /// </summary>
-        public int Red { get; private set; }
-        /// <summary>
-        /// 颜色码，0-255
-        /// </summary>
-        public int Green { get; private set; }
-
-        /// <summary>
-        /// 颜色码，0-255
-        /// </summary>
-        public int Blue { get; private set; }
-
-        /// <summary>
-        /// 附加列，测试多次数据库 Migrate
-        /// </summary>
-        public string AdditionNote { get; private set; }
-
-        private Color() { }
-
-        public Color(int red, int green, int blue)
-        {
-            if (red < 0 || green < 0 || blue < 0)
-            {
-                Random();//随机
-            }
-            else
-            {
-                Red = red;
-                Green = green;
-                Blue = blue;
-            }
-        }
-
-        public Color(int red, int green, int blue, string additionNote) : this(red, green, blue)
-        {
-            AdditionNote = additionNote;
-        }
-
-        public Color(ColorDto colorDto)
-        {
-            Red = colorDto.Red;
-            Green = colorDto.Green;
-            Blue = colorDto.Blue;
-        }
-
-        public void Random()
-        {
-            //随机产生颜色代码
-            var radom = new Random();
-            Func<int> getRadomColorCode = () => radom.Next(0, 255);
-            Red = getRadomColorCode();
-            Green = getRadomColorCode();
-            Blue = getRadomColorCode();
-        }
-
-        public void Brighten()
-        {
-            Red = Math.Min(255, Red + 10);
-            Green = Math.Min(255, Green + 10);
-            Blue = Math.Min(255, Blue + 10);
-        }
-
-        public void Darken()
-        {
-            Red = Math.Max(0, Red - 10);
-            Green = Math.Max(0, Green - 10);
-            Blue = Math.Max(0, Blue - 10);
-        }
-
-        public void Update(UpdateColorRequestDto dto)
-        {
-            Red = dto.Red;
-            Green = dto.Green;
-            Blue = dto.Blue;
-            AdditionNote = dto.AdditionNote;
-        }
-    }
-}
+        public const string ColorModelTemplate = @"using Senparc.Ncf.Core.Models;
+using Template_OrgName.Xncf.Template_XncfName.Domain.Models.DatabaseModel.Dto;
+using System;
+using System.ComponentModel.DataAnnotations.Schema;
+using Template_OrgName.Xncf.Template_XncfName.Domain.Models.DatabaseModel.Dto;
+
+namespace Template_OrgName.Xncf.Template_XncfName
+{
+    /// <summary>
+    /// Color 实体类
+    /// </summary>
+    [Table(Register.DATABASE_PREFIX + nameof(Color))]//必须添加前缀，防止全系统中发生冲突
+    [Serializable]
+    public class Color : EntityBase<int>
+    {
+        /// <summary>
+        /// 颜色码，0-255
+        /// </summary>
+        public int Red { get; private set; }
+        /// <summary>
+        /// 颜色码，0-255
+        /// </summary>
+        public int Green { get; private set; }
+
+        /// <summary>
+        /// 颜色码，0-255
+        /// </summary>
+        public int Blue { get; private set; }
+
+        /// <summary>
+        /// 附加列，测试多次数据库 Migrate
+        /// </summary>
+        public string AdditionNote { get; private set; }
+
+        private Color() { }
+
+        public Color(int red, int green, int blue)
+        {
+            if (red < 0 || green < 0 || blue < 0)
+            {
+                Random();//随机
+            }
+            else
+            {
+                Red = red;
+                Green = green;
+                Blue = blue;
+            }
+        }
+
+        public Color(int red, int green, int blue, string additionNote) : this(red, green, blue)
+        {
+            AdditionNote = additionNote;
+        }
+
+        public Color(ColorDto colorDto)
+        {
+            Red = colorDto.Red;
+            Green = colorDto.Green;
+            Blue = colorDto.Blue;
+        }
+
+        public void Random()
+        {
+            //随机产生颜色代码
+            var radom = new Random();
+            Func<int> getRadomColorCode = () => radom.Next(0, 255);
+            Red = getRadomColorCode();
+            Green = getRadomColorCode();
+            Blue = getRadomColorCode();
+        }
+
+        public void Brighten()
+        {
+            Red = Math.Min(255, Red + 10);
+            Green = Math.Min(255, Green + 10);
+            Blue = Math.Min(255, Blue + 10);
+        }
+
+        public void Darken()
+        {
+            Red = Math.Max(0, Red - 10);
+            Green = Math.Max(0, Green - 10);
+            Blue = Math.Max(0, Blue - 10);
+        }
+
+        public void Update(UpdateColorRequestDto dto)
+        {
+            Red = dto.Red;
+            Green = dto.Green;
+            Blue = dto.Blue;
+            AdditionNote = dto.AdditionNote;
+        }
+    }
+}
 ";
 
         /// <summary>
         /// 颜色DTO模板
         /// 类型: backend_template
         /// </summary>
-        public const string ColorDtoTemplate = @"using Senparc.Ncf.Core.Models;
-
-namespace Template_OrgName.Xncf.Template_XncfName.Domain.Models.DatabaseModel.Dto
-{
-    public class ColorDto : DtoBase
-    {
-        /// <summary>
-        /// 颜色码，0-255
-        /// </summary>
-        public int Red { get; set; }
-        /// <summary>
-        /// 颜色码，0-255
-        /// </summary>
-        public int Green { get; set; }
-        /// <summary>
-        /// 颜色码，0-255
-        /// </summary>
-        public int Blue { get; set; }
-
-        /// <summary>
-        /// 附加列，测试多次数据库 Migrate
-        /// </summary>
-        public string AdditionNote { get; set; }
-
-        public ColorDto() { }
-    }
-}
+        public const string ColorDtoTemplate = @"using Senparc.Ncf.Core.Models;
+
+namespace Template_OrgName.Xncf.Template_XncfName.Domain.Models.DatabaseModel.Dto
+{
+    public class ColorDto : DtoBase
+    {
+        /// <summary>
+        /// 颜色码，0-255
+        /// </summary>
+        public int Red { get; set; }
+        /// <summary>
+        /// 颜色码，0-255
+        /// </summary>
+        public int Green { get; set; }
+        /// <summary>
+        /// 颜色码，0-255
+        /// </summary>
+        public int Blue { get; set; }
+
+        /// <summary>
+        /// 附加列，测试多次数据库 Migrate
+        /// </summary>
+        public string AdditionNote { get; set; }
+
+        public ColorDto() { }
+    }
+}
 ";
 
         /// <summary>
         /// 颜色服务模板
         /// 类型: backend_template
         /// </summary>
-        public const string ColorServiceTemplate = @"using Senparc.Ncf.Core.Enums;
-using Senparc.Ncf.Repository;
-using Senparc.Ncf.Service;
-using Template_OrgName.Xncf.Template_XncfName.Domain.Models.DatabaseModel.Dto;
-using System;
-using System.Threading.Tasks;
-
-namespace Template_OrgName.Xncf.Template_XncfName.Domain.Services
-{
-    public class ColorService : ServiceBase<Color>
-    {
-        public ColorService(IRepositoryBase<Color> repo, IServiceProvider serviceProvider)
-            : base(repo, serviceProvider)
-        {
-        }
-
-        public async Task<ColorDto> CreateNewColor()
-        {
-            Color color = new Color(-1, -1, -1);
-            await base.SaveObjectAsync(color).ConfigureAwait(false);
-            ColorDto colorDto = base.Mapper.Map<ColorDto>(color);
-            return colorDto;
-        }
-
-        public async Task<ColorDto> GetOrInitColor()
-        {
-            var color = await base.GetObjectAsync(z => true);
-            if (color == null)//如果是纯第一次安装，理论上不会有残留数据
-            {
-                //创建默认颜色
-                ColorDto colorDto = await this.CreateNewColor().ConfigureAwait(false);
-                return colorDto;
-            }
-
-            return base.Mapper.Map<ColorDto>(color);
-        }
-
-        public async Task<ColorDto> Brighten()
-        {
-            //TODO:异步方法需要添加排序功能
-            var obj = await this.GetObjectAsync(z => true, z => z.Id, OrderingType.Descending);
-            obj.Brighten();
-            await base.SaveObjectAsync(obj).ConfigureAwait(false);
-            return base.Mapper.Map<ColorDto>(obj);
-        }
-
-        public async Task<ColorDto> Darken()
-        {
-            //TODO:异步方法需要添加排序功能
-            var obj = await this.GetObjectAsync(z => true, z => z.Id, OrderingType.Descending);
-            obj.Darken();
-            await base.SaveObjectAsync(obj).ConfigureAwait(false);
-            return base.Mapper.Map<ColorDto>(obj);
-        }
-
-        public async Task<ColorDto> Random()
-        {
-            //TODO:异步方法需要添加排序功能
-            var obj = await this.GetObjectAsync(z => true, z => z.Id, OrderingType.Descending);
-            obj.Random();
-            await base.SaveObjectAsync(obj).ConfigureAwait(false);
-            return base.Mapper.Map<ColorDto>(obj);
-        }
-
-        //TODO: 更多业务方法可以写到这里
-    }
-}
+        public const string ColorServiceTemplate = @"using Senparc.Ncf.Core.Enums;
+using Senparc.Ncf.Repository;
+using Senparc.Ncf.Service;
+using Template_OrgName.Xncf.Template_XncfName.Domain.Models.DatabaseModel.Dto;
+using System;
+using System.Threading.Tasks;
+
+namespace Template_OrgName.Xncf.Template_XncfName.Domain.Services
+{
+    public class ColorService : ServiceBase<Color>
+    {
+        public ColorService(IRepositoryBase<Color> repo, IServiceProvider serviceProvider)
+            : base(repo, serviceProvider)
+        {
+        }
+
+        public async Task<ColorDto> CreateNewColor()
+        {
+            Color color = new Color(-1, -1, -1);
+            await base.SaveObjectAsync(color).ConfigureAwait(false);
+            ColorDto colorDto = base.Mapper.Map<ColorDto>(color);
+            return colorDto;
+        }
+
+        public async Task<ColorDto> GetOrInitColor()
+        {
+            var color = await base.GetObjectAsync(z => true);
+            if (color == null)//如果是纯第一次安装，理论上不会有残留数据
+            {
+                //创建默认颜色
+                ColorDto colorDto = await this.CreateNewColor().ConfigureAwait(false);
+                return colorDto;
+            }
+
+            return base.Mapper.Map<ColorDto>(color);
+        }
+
+        public async Task<ColorDto> Brighten()
+        {
+            //TODO:异步方法需要添加排序功能
+            var obj = await this.GetObjectAsync(z => true, z => z.Id, OrderingType.Descending);
+            obj.Brighten();
+            await base.SaveObjectAsync(obj).ConfigureAwait(false);
+            return base.Mapper.Map<ColorDto>(obj);
+        }
+
+        public async Task<ColorDto> Darken()
+        {
+            //TODO:异步方法需要添加排序功能
+            var obj = await this.GetObjectAsync(z => true, z => z.Id, OrderingType.Descending);
+            obj.Darken();
+            await base.SaveObjectAsync(obj).ConfigureAwait(false);
+            return base.Mapper.Map<ColorDto>(obj);
+        }
+
+        public async Task<ColorDto> Random()
+        {
+            //TODO:异步方法需要添加排序功能
+            var obj = await this.GetObjectAsync(z => true, z => z.Id, OrderingType.Descending);
+            obj.Random();
+            await base.SaveObjectAsync(obj).ConfigureAwait(false);
+            return base.Mapper.Map<ColorDto>(obj);
+        }
+
+        //TODO: 更多业务方法可以写到这里
+    }
+}
 ";
 
         #endregion
@@ -360,431 +360,431 @@ public async Task<ColorDto> Random()
         /// 数据库示例索引页面视图模板
         /// 类型: frontend_template
         /// </summary>
-        public const string DatabaseSampleIndexViewTemplate = @"@page
-@model Template_OrgName.Xncf.Template_XncfName.Areas.Template_XncfName.Pages.DatabaseSampleIndex
-@{
-    ViewData[""Title""] = ""Color 数据库管理"";
-    Layout = ""_Layout_Vue"";
-}
-
-@section Style {
-    <link href=""~/css/Admin/Template_XncfName/databaseSampleIndex.css"" rel=""stylesheet"" />
-}
-
-@section breadcrumbs {
-    <el-breadcrumb-item>扩展模块</el-breadcrumb-item>
-    <el-breadcrumb-item>Template_MenuName</el-breadcrumb-item>
-    <el-breadcrumb-item>Color 数据库管理</el-breadcrumb-item>
-}
-
-<div>
-    <div class=""filter-container"">
-        <el-button type=""primary"" icon=""el-icon-plus"" size=""small"" @@click=""addColor"">添加颜色</el-button>
-        <el-button type=""success"" icon=""el-icon-refresh"" size=""small"" @@click=""refreshList"">刷新</el-button>
-        <el-button type=""info"" icon=""el-icon-info"" size=""small"" @@click=""debugInfo"">调试信息</el-button>
-    </div>
-
-    <!-- 调试信息显示 -->
-    <div v-if=""showDebug"" style=""background: #f0f9ff; border: 1px solid #0ea5e9; padding: 10px; margin: 10px 0; border-radius: 4px;"">
-        <h4>调试信息：</h4>
-        <p><strong>tableData长度:</strong> {{ tableData ? tableData.length : 'null/undefined' }}</p>
-        <p><strong>total:</strong> {{ total }}</p>
-        <p><strong>tableLoading:</strong> {{ tableLoading }}</p>
-        <p><strong>Vue实例是否正常:</strong> {{ $el ? '是' : '否' }}</p>
-        <div v-if=""tableData && tableData.length > 0"">
-            <strong>第一条数据:</strong>
-            <pre>{{ JSON.stringify(tableData[0], null, 2) }}</pre>
-        </div>
-        
-        <!-- 简化数据显示测试 -->
-        <div style=""background: #fff3cd; border: 1px solid #ffc107; padding: 10px; margin: 10px 0; border-radius: 4px;"">
-            <h5>简化数据显示测试:</h5>
-            <div v-for=""(item, index) in tableData"" :key=""item.id || index"" style=""border: 1px solid #ccc; margin: 5px 0; padding: 5px;"">
-                <strong>ID:</strong> {{item.id}} | 
-                <strong>RGB:</strong> {{item.red}},{{item.green}},{{item.blue}} | 
-                <strong>时间:</strong> {{item.addTime}}
-            </div>
-            <p v-if=""!tableData || tableData.length === 0"" style=""color: red;"">
-                <strong>没有数据显示！</strong>
-            </p>
-        </div>
-    </div>
-
-    <el-table :data=""tableData"" v-loading=""tableLoading"" border>
-        <el-table-column prop=""id"" label=""ID"" width=""auto""></el-table-column>
-        <el-table-column prop=""red"" label=""红色值 (R)"" width=""auto"">
-            <template slot-scope=""scope"">
-                <el-tag :style=""{backgroundColor: `rgb(${scope.row.red}, 0, 0)`, color: 'white'}"">
-                    {{scope.row.red}}
-                </el-tag>
-            </template>
-        </el-table-column>
-        <el-table-column prop=""green"" label=""绿色值 (G)"" width=""auto"">
-            <template slot-scope=""scope"">
-                <el-tag :style=""{backgroundColor: `rgb(0, ${scope.row.green}, 0)`, color: 'white'}"">
-                    {{scope.row.green}}
-                </el-tag>
-            </template>
-        </el-table-column>
-        <el-table-column prop=""blue"" label=""蓝色值 (B)"" width=""auto"">
-            <template slot-scope=""scope"">
-                <el-tag :style=""{backgroundColor: `rgb(0, 0, ${scope.row.blue})`, color: 'white'}"">
-                    {{scope.row.blue}}
-                </el-tag>
-            </template>
-        </el-table-column>
-        <el-table-column label=""颜色预览"" width=""auto"">
-            <template slot-scope=""scope"">
-                <div class=""color-preview"" :style=""{backgroundColor: `rgb(${scope.row.red}, ${scope.row.green}, ${scope.row.blue})`}"">
-                    RGB({{scope.row.red}}, {{scope.row.green}}, {{scope.row.blue}})
-                </div>
-            </template>
-        </el-table-column>
-        <el-table-column prop=""addTime"" label=""创建时间"" width=""auto"">
-            <template slot-scope=""scope"">
-                {{ dateformatter(scope.row.addTime) }}
-            </template>
-        </el-table-column>
-        <el-table-column prop=""lastUpdateTime"" label=""更新时间"" width=""auto"">
-            <template slot-scope=""scope"">
-                {{ dateformatter(scope.row.lastUpdateTime) }}
-            </template>
-        </el-table-column>
-        <el-table-column label=""操作"" width=""auto"">
-            <template slot-scope=""scope"">
-                <el-button type=""primary"" size=""mini"" @@click=""editColor(scope.row)"">编辑</el-button>
-                <el-button type=""warning"" size=""mini"" @@click=""randomizeColor(scope.row)"">随机</el-button>
-                <el-button type=""danger"" size=""mini"" @@click=""deleteColor(scope.row)"">删除</el-button>
-            </template>
-        </el-table-column>
-    </el-table>
-    
-    <div class=""pagination-container"">
-        <el-pagination @@current-change=""handleCurrentChange""
-                       @@size-change=""handleSizeChange""
-                       :current-page=""page.page""
-                       :page-sizes=""[10, 20, 30, 40]""
-                       :page-size=""page.size""
-                       layout=""sizes, prev, next, jumper""
-                       :total=""total""
-                       background
-                       style=""margin-top: 20px"">
-        </el-pagination>
-    </div>
-
-    @* dialog for 添加颜色 *@
-    <el-dialog title=""添加颜色"" :visible.sync=""addFormDialogVisible"" width=""50%"" :close-on-click-modal=""false"">
-        <el-form :model=""addForm"" label-width=""120px"" :rules=""addRules"" ref=""addForm"">
-            <el-form-item label=""红色值 (R)"" prop=""red"">
-                <el-slider v-model=""addForm.red"" :min=""0"" :max=""255"" show-input></el-slider>
-            </el-form-item>
-            <el-form-item label=""绿色值 (G)"" prop=""green"">
-                <el-slider v-model=""addForm.green"" :min=""0"" :max=""255"" show-input></el-slider>
-            </el-form-item>
-            <el-form-item label=""蓝色值 (B)"" prop=""blue"">
-                <el-slider v-model=""addForm.blue"" :min=""0"" :max=""255"" show-input></el-slider>
-            </el-form-item>
-            <el-form-item label=""颜色预览"">
-                <div class=""color-preview-large"" :style=""{backgroundColor: `rgb(${addForm.red}, ${addForm.green}, ${addForm.blue})`}"">
-                    RGB({{addForm.red}}, {{addForm.green}}, {{addForm.blue}})
-                </div>
-            </el-form-item>
-            <el-form-item label=""附加备注"" prop=""additionNote"">
-                <el-input v-model=""addForm.additionNote"" type=""textarea"" :rows=""3"" placeholder=""请输入颜色的附加备注信息...""></el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-button @@click=""randomizeForm"" type=""info"">随机颜色</el-button>
-            </el-form-item>
-        </el-form>
-        <span slot=""footer"" class=""dialog-footer"">
-            <el-button @@click=""addFormDialogVisible = false"">取 消</el-button>
-            <el-button type=""primary"" @@click=""addColorSubmit"">确 定</el-button>
-        </span>
-    </el-dialog>
-
-    @* dialog for 编辑颜色 *@
-    <el-dialog title=""编辑颜色"" :visible.sync=""editFormDialogVisible"" width=""50%"" :close-on-click-modal=""false"">
-        <el-form :model=""editForm"" label-width=""120px"" :rules=""editRules"" ref=""editForm"">
-            <el-form-item label=""红色值 (R)"" prop=""red"">
-                <el-slider v-model=""editForm.red"" :min=""0"" :max=""255"" show-input></el-slider>
-            </el-form-item>
-            <el-form-item label=""绿色值 (G)"" prop=""green"">
-                <el-slider v-model=""editForm.green"" :min=""0"" :max=""255"" show-input></el-slider>
-            </el-form-item>
-            <el-form-item label=""蓝色值 (B)"" prop=""blue"">
-                <el-slider v-model=""editForm.blue"" :min=""0"" :max=""255"" show-input></el-slider>
-            </el-form-item>
-            <el-form-item label=""颜色预览"">
-                <div class=""color-preview-large"" :style=""{backgroundColor: `rgb(${editForm.red}, ${editForm.green}, ${editForm.blue})`}"">
-                    RGB({{editForm.red}}, {{editForm.green}}, {{editForm.blue}})
-                </div>
-            </el-form-item>
-            <el-form-item label=""附加备注"" prop=""additionNote"">
-                <el-input v-model=""editForm.additionNote"" type=""textarea"" :rows=""3"" placeholder=""请输入颜色的附加备注信息...""></el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-button @@click=""randomizeEditForm"" type=""info"">随机颜色</el-button>
-            </el-form-item>
-        </el-form>
-        <span slot=""footer"" class=""dialog-footer"">
-            <el-button @@click=""editFormDialogVisible = false"">取 消</el-button>
-            <el-button type=""primary"" @@click=""editColorSubmit"">确 定</el-button>
-        </span>
-    </el-dialog>
-</div>
-
-@section scripts{
-    <script src=""~/js/Admin/Template_XncfName/databaseSampleIndex.js""></script>
+        public const string DatabaseSampleIndexViewTemplate = @"@page
+@model Template_OrgName.Xncf.Template_XncfName.Areas.Template_XncfName.Pages.DatabaseSampleIndex
+@{
+    ViewData[""Title""] = ""Color 数据库管理"";
+    Layout = ""_Layout_Vue"";
+}
+
+@section Style {
+    <link href=""~/css/Admin/Template_XncfName/databaseSampleIndex.css"" rel=""stylesheet"" />
+}
+
+@section breadcrumbs {
+    <el-breadcrumb-item>扩展模块</el-breadcrumb-item>
+    <el-breadcrumb-item>Template_MenuName</el-breadcrumb-item>
+    <el-breadcrumb-item>Color 数据库管理</el-breadcrumb-item>
+}
+
+<div>
+    <div class=""filter-container"">
+        <el-button type=""primary"" icon=""el-icon-plus"" size=""small"" @@click=""addColor"">添加颜色</el-button>
+        <el-button type=""success"" icon=""el-icon-refresh"" size=""small"" @@click=""refreshList"">刷新</el-button>
+        <el-button type=""info"" icon=""el-icon-info"" size=""small"" @@click=""debugInfo"">调试信息</el-button>
+    </div>
+
+    <!-- 调试信息显示 -->
+    <div v-if=""showDebug"" style=""background: #f0f9ff; border: 1px solid #0ea5e9; padding: 10px; margin: 10px 0; border-radius: 4px;"">
+        <h4>调试信息：</h4>
+        <p><strong>tableData长度:</strong> {{ tableData ? tableData.length : 'null/undefined' }}</p>
+        <p><strong>total:</strong> {{ total }}</p>
+        <p><strong>tableLoading:</strong> {{ tableLoading }}</p>
+        <p><strong>Vue实例是否正常:</strong> {{ $el ? '是' : '否' }}</p>
+        <div v-if=""tableData && tableData.length > 0"">
+            <strong>第一条数据:</strong>
+            <pre>{{ JSON.stringify(tableData[0], null, 2) }}</pre>
+        </div>
+        
+        <!-- 简化数据显示测试 -->
+        <div style=""background: #fff3cd; border: 1px solid #ffc107; padding: 10px; margin: 10px 0; border-radius: 4px;"">
+            <h5>简化数据显示测试:</h5>
+            <div v-for=""(item, index) in tableData"" :key=""item.id || index"" style=""border: 1px solid #ccc; margin: 5px 0; padding: 5px;"">
+                <strong>ID:</strong> {{item.id}} | 
+                <strong>RGB:</strong> {{item.red}},{{item.green}},{{item.blue}} | 
+                <strong>时间:</strong> {{item.addTime}}
+            </div>
+            <p v-if=""!tableData || tableData.length === 0"" style=""color: red;"">
+                <strong>没有数据显示！</strong>
+            </p>
+        </div>
+    </div>
+
+    <el-table :data=""tableData"" v-loading=""tableLoading"" border>
+        <el-table-column prop=""id"" label=""ID"" width=""auto""></el-table-column>
+        <el-table-column prop=""red"" label=""红色值 (R)"" width=""auto"">
+            <template slot-scope=""scope"">
+                <el-tag :style=""{backgroundColor: `rgb(${scope.row.red}, 0, 0)`, color: 'white'}"">
+                    {{scope.row.red}}
+                </el-tag>
+            </template>
+        </el-table-column>
+        <el-table-column prop=""green"" label=""绿色值 (G)"" width=""auto"">
+            <template slot-scope=""scope"">
+                <el-tag :style=""{backgroundColor: `rgb(0, ${scope.row.green}, 0)`, color: 'white'}"">
+                    {{scope.row.green}}
+                </el-tag>
+            </template>
+        </el-table-column>
+        <el-table-column prop=""blue"" label=""蓝色值 (B)"" width=""auto"">
+            <template slot-scope=""scope"">
+                <el-tag :style=""{backgroundColor: `rgb(0, 0, ${scope.row.blue})`, color: 'white'}"">
+                    {{scope.row.blue}}
+                </el-tag>
+            </template>
+        </el-table-column>
+        <el-table-column label=""颜色预览"" width=""auto"">
+            <template slot-scope=""scope"">
+                <div class=""color-preview"" :style=""{backgroundColor: `rgb(${scope.row.red}, ${scope.row.green}, ${scope.row.blue})`}"">
+                    RGB({{scope.row.red}}, {{scope.row.green}}, {{scope.row.blue}})
+                </div>
+            </template>
+        </el-table-column>
+        <el-table-column prop=""addTime"" label=""创建时间"" width=""auto"">
+            <template slot-scope=""scope"">
+                {{ dateformatter(scope.row.addTime) }}
+            </template>
+        </el-table-column>
+        <el-table-column prop=""lastUpdateTime"" label=""更新时间"" width=""auto"">
+            <template slot-scope=""scope"">
+                {{ dateformatter(scope.row.lastUpdateTime) }}
+            </template>
+        </el-table-column>
+        <el-table-column label=""操作"" width=""auto"">
+            <template slot-scope=""scope"">
+                <el-button type=""primary"" size=""mini"" @@click=""editColor(scope.row)"">编辑</el-button>
+                <el-button type=""warning"" size=""mini"" @@click=""randomizeColor(scope.row)"">随机</el-button>
+                <el-button type=""danger"" size=""mini"" @@click=""deleteColor(scope.row)"">删除</el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+    
+    <div class=""pagination-container"">
+        <el-pagination @@current-change=""handleCurrentChange""
+                       @@size-change=""handleSizeChange""
+                       :current-page=""page.page""
+                       :page-sizes=""[10, 20, 30, 40]""
+                       :page-size=""page.size""
+                       layout=""sizes, prev, next, jumper""
+                       :total=""total""
+                       background
+                       style=""margin-top: 20px"">
+        </el-pagination>
+    </div>
+
+    @* dialog for 添加颜色 *@
+    <el-dialog title=""添加颜色"" :visible.sync=""addFormDialogVisible"" width=""50%"" :close-on-click-modal=""false"">
+        <el-form :model=""addForm"" label-width=""120px"" :rules=""addRules"" ref=""addForm"">
+            <el-form-item label=""红色值 (R)"" prop=""red"">
+                <el-slider v-model=""addForm.red"" :min=""0"" :max=""255"" show-input></el-slider>
+            </el-form-item>
+            <el-form-item label=""绿色值 (G)"" prop=""green"">
+                <el-slider v-model=""addForm.green"" :min=""0"" :max=""255"" show-input></el-slider>
+            </el-form-item>
+            <el-form-item label=""蓝色值 (B)"" prop=""blue"">
+                <el-slider v-model=""addForm.blue"" :min=""0"" :max=""255"" show-input></el-slider>
+            </el-form-item>
+            <el-form-item label=""颜色预览"">
+                <div class=""color-preview-large"" :style=""{backgroundColor: `rgb(${addForm.red}, ${addForm.green}, ${addForm.blue})`}"">
+                    RGB({{addForm.red}}, {{addForm.green}}, {{addForm.blue}})
+                </div>
+            </el-form-item>
+            <el-form-item label=""附加备注"" prop=""additionNote"">
+                <el-input v-model=""addForm.additionNote"" type=""textarea"" :rows=""3"" placeholder=""请输入颜色的附加备注信息...""></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button @@click=""randomizeForm"" type=""info"">随机颜色</el-button>
+            </el-form-item>
+        </el-form>
+        <span slot=""footer"" class=""dialog-footer"">
+            <el-button @@click=""addFormDialogVisible = false"">取 消</el-button>
+            <el-button type=""primary"" @@click=""addColorSubmit"">确 定</el-button>
+        </span>
+    </el-dialog>
+
+    @* dialog for 编辑颜色 *@
+    <el-dialog title=""编辑颜色"" :visible.sync=""editFormDialogVisible"" width=""50%"" :close-on-click-modal=""false"">
+        <el-form :model=""editForm"" label-width=""120px"" :rules=""editRules"" ref=""editForm"">
+            <el-form-item label=""红色值 (R)"" prop=""red"">
+                <el-slider v-model=""editForm.red"" :min=""0"" :max=""255"" show-input></el-slider>
+            </el-form-item>
+            <el-form-item label=""绿色值 (G)"" prop=""green"">
+                <el-slider v-model=""editForm.green"" :min=""0"" :max=""255"" show-input></el-slider>
+            </el-form-item>
+            <el-form-item label=""蓝色值 (B)"" prop=""blue"">
+                <el-slider v-model=""editForm.blue"" :min=""0"" :max=""255"" show-input></el-slider>
+            </el-form-item>
+            <el-form-item label=""颜色预览"">
+                <div class=""color-preview-large"" :style=""{backgroundColor: `rgb(${editForm.red}, ${editForm.green}, ${editForm.blue})`}"">
+                    RGB({{editForm.red}}, {{editForm.green}}, {{editForm.blue}})
+                </div>
+            </el-form-item>
+            <el-form-item label=""附加备注"" prop=""additionNote"">
+                <el-input v-model=""editForm.additionNote"" type=""textarea"" :rows=""3"" placeholder=""请输入颜色的附加备注信息...""></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button @@click=""randomizeEditForm"" type=""info"">随机颜色</el-button>
+            </el-form-item>
+        </el-form>
+        <span slot=""footer"" class=""dialog-footer"">
+            <el-button @@click=""editFormDialogVisible = false"">取 消</el-button>
+            <el-button type=""primary"" @@click=""editColorSubmit"">确 定</el-button>
+        </span>
+    </el-dialog>
+</div>
+
+@section scripts{
+    <script src=""~/js/Admin/Template_XncfName/databaseSampleIndex.js""></script>
 } ";
 
         /// <summary>
         /// 数据库示例索引页面代码后置模板
         /// 类型: frontend_template
         /// </summary>
-        public const string DatabaseSampleIndexCodeBehindTemplate = @"using Microsoft.AspNetCore.Mvc;
-using Senparc.Ncf.Service;
-using Senparc.Ncf.Utility;
-using Template_OrgName.Xncf.Template_XncfName.Domain.Services;
-using System;
-using System.Linq;
-using System.Threading.Tasks;
-using Template_OrgName.Xncf.Template_XncfName.Domain.Models.DatabaseModel.Dto;
-
-namespace Template_OrgName.Xncf.Template_XncfName.Areas.Template_XncfName.Pages
-{
-    public class DatabaseSampleIndex : Senparc.Ncf.AreaBase.Admin.AdminXncfModulePageModelBase
-    {
-        private readonly ColorService _colorService;
-
-        public DatabaseSampleIndex(Lazy<XncfModuleService> xncfModuleService, ColorService colorService) : base(xncfModuleService)
-        {
-            _colorService = colorService;
-        }
-
-        public void OnGet()
-        {
-        }
-
-        /// <summary>
-        /// 获取颜色列表（分页）
-        /// </summary>
-        /// <param name=""keyword"">关键词</param>
-        /// <param name=""orderField"">排序字段</param>
-        /// <param name=""pageIndex"">页码</param>
-        /// <param name=""pageSize"">页大小</param>
-        /// <returns></returns>
-        public async Task<IActionResult> OnGetColorListAsync(string keyword, string orderField, int pageIndex, int pageSize)
-        {
-            try
-            {
-                // 调试信息
-                System.Diagnostics.Debug.WriteLine($""ColorList API Called - PageIndex: {pageIndex}, PageSize: {pageSize}, OrderField: {orderField}"");
-                
-                var seh = new SenparcExpressionHelper<Color>();
-                // 可以根据需要添加搜索条件
-                // seh.ValueCompare.AndAlso(!string.IsNullOrEmpty(keyword), _ => _.Remark.Contains(keyword));
-                var where = seh.BuildWhereExpression();
-                var response = await _colorService.GetObjectListAsync(pageIndex, pageSize, where, orderField ?? ""Id desc"");
-                
-                // 调试信息
-                System.Diagnostics.Debug.WriteLine($""Database Query Result - TotalCount: {response.TotalCount}, ItemCount: {response.Count()}"");
-                
-                var result = new
-                {
-                    success = true,
-                    message = ""数据获取成功"",
-                    data = new {
-                        totalCount = response.TotalCount,
-                        pageIndex = response.PageIndex,
-                        list = response.Select(_ => new
-                        {
-                            id = _.Id,
-                            red = _.Red,
-                            green = _.Green,
-                            blue = _.Blue,
-                            additionNote = _.AdditionNote,
-                            addTime = _.AddTime,
-                            lastUpdateTime = _.LastUpdateTime,
-                            remark = _.Remark
-                        }).ToList()
-                    }
-                };
-                
-                // 调试信息
-                System.Diagnostics.Debug.WriteLine($""API Response - ListCount: {result.data.list.Count}"");
-                
-                return Ok(result);
-            }
-            catch (Exception ex)
-            {
-                System.Diagnostics.Debug.WriteLine($""ColorList API Error: {ex.Message}"");
-                return Ok(new { 
-                    success = false, 
-                    message = ""获取数据失败: "" + ex.Message,
-                    totalCount = 0,
-                    pageIndex = pageIndex,
-                    list = new object[0]
-                });
-            }
-        }
-
-        /// <summary>
-        /// 创建新颜色
-        /// </summary>
-        /// <param name=""request"">创建颜色请求</param>
-        /// <returns></returns>
-        public async Task<IActionResult> OnPostCreateColorAsync([FromBody] CreateColorRequestDto request)
-        {
-            try
-            {
-                // 调试信息
-                System.Diagnostics.Debug.WriteLine($""CreateColor API Called - Red: {request.Red}, Green: {request.Green}, Blue: {request.Blue}, AdditionNote: {request.AdditionNote}"");
-                
-                if (request == null)
-                {
-                    return Ok(new { success = false, message = ""请求参数不能为空"" });
-                }
-                
-                var color = new Color(request.Red, request.Green, request.Blue, request.AdditionNote);
-                await _colorService.SaveObjectAsync(color);
-                
-                return Ok(new { success = true, message = ""颜色创建成功"", data = new { color.Id, color.Red, color.Green, color.Blue, color.AdditionNote, color.AddTime, color.LastUpdateTime } });
-            }
-            catch (Exception ex)
-            {
-                System.Diagnostics.Debug.WriteLine($""CreateColor API Error: {ex.Message}"");
-                return Ok(new { success = false, message = ""创建失败："" + ex.Message });
-            }
-        }
-
-        /// <summary>
-        /// 更新颜色
-        /// </summary>
-        /// <param name=""request"">更新颜色请求</param>
-        /// <returns></returns>
-        public async Task<IActionResult> OnPostUpdateColorAsync([FromBody] UpdateColorRequestDto request)
-        {
-            try
-            {
-                // 调试信息
-                System.Diagnostics.Debug.WriteLine($""UpdateColor API Called - Id: {request.Id}, Red: {request.Red}, Green: {request.Green}, Blue: {request.Blue}, AdditionNote: {request.AdditionNote}"");
-                
-                if (request == null)
-                {
-                    return Ok(new { success = false, message = ""请求参数不能为空"" });
-                }
-                
-                var color = await _colorService.GetObjectAsync(c => c.Id == request.Id);
-                if (color == null)
-                {
-                    return Ok(new { success = false, message = ""颜色不存在"" });
-                }
-
-                // 更新
-                color.Update(request);
-                
-                await _colorService.SaveObjectAsync(color);
-                
-                return Ok(new { success = true, message = ""颜色更新成功"", data = new { color.Id, color.Red, color.Green, color.Blue, color.AdditionNote, color.LastUpdateTime } });
-            }
-            catch (Exception ex)
-            {
-                System.Diagnostics.Debug.WriteLine($""UpdateColor API Error: {ex.Message}"");
-                return Ok(new { success = false, message = ""更新失败："" + ex.Message });
-            }
-        }
-
-        /// <summary>
-        /// 删除颜色
-        /// </summary>
-        /// <param name=""request"">删除颜色请求</param>
-        /// <returns></returns>
-        public async Task<IActionResult> OnPostDeleteColorAsync([FromBody] DeleteColorRequestDto request)
-        {
-            try
-            {
-                // 调试信息
-                System.Diagnostics.Debug.WriteLine($""DeleteColor API Called - Id: {request.Id}"");
-                
-                if (request == null)
-                {
-                    return Ok(new { success = false, message = ""请求参数不能为空"" });
-                }
-                
-                var color = await _colorService.GetObjectAsync(c => c.Id == request.Id);
-                if (color == null)
-                {
-                    return Ok(new { success = false, message = ""颜色不存在"" });
-                }
-
-                await _colorService.DeleteObjectAsync(color);
-                return Ok(new { success = true, message = ""颜色删除成功"" });
-            }
-            catch (Exception ex)
-            {
-                System.Diagnostics.Debug.WriteLine($""DeleteColor API Error: {ex.Message}"");
-                return Ok(new { success = false, message = ""删除失败："" + ex.Message });
-            }
-        }
-
-        /// <summary>
-        /// 随机化指定颜色
-        /// </summary>
-        /// <param name=""request"">随机化颜色请求</param>
-        /// <returns></returns>
-        public async Task<IActionResult> OnPostRandomizeColorAsync([FromBody] RandomizeColorRequestDto request)
-        {
-            try
-            {
-                // 调试信息
-                System.Diagnostics.Debug.WriteLine($""RandomizeColor API Called - Id: {request.Id}"");
-                
-                if (request == null)
-                {
-                    return Ok(new { success = false, message = ""请求参数不能为空"" });
-                }
-                
-                var color = await _colorService.GetObjectAsync(c => c.Id == request.Id);
-                if (color == null)
-                {
-                    return Ok(new { success = false, message = ""颜色不存在"" });
-                }
-
-                color.Random();
-                await _colorService.SaveObjectAsync(color);
-                
-                return Ok(new { success = true, message = ""颜色随机化成功"", data = new { color.Id, color.Red, color.Green, color.Blue, color.AdditionNote, color.LastUpdateTime } });
-            }
-            catch (Exception ex)
-            {
-                System.Diagnostics.Debug.WriteLine($""RandomizeColor API Error: {ex.Message}"");
-                return Ok(new { success = false, message = ""随机化失败："" + ex.Message });
-            }
-        }
-
-        /// <summary>
-        /// 获取颜色详情
-        /// </summary>
-        /// <param name=""id"">颜色ID</param>
-        /// <returns></returns>
-        public async Task<IActionResult> OnGetColorDetailAsync(int id)
-        {
-            try
-            {
-                var color = await _colorService.GetObjectAsync(c => c.Id == id);
-                if (color == null)
-                {
-                    return Ok(new { success = false, message = ""颜色不存在"" });
-                }
-
-                return Ok(new { success = true, data = new { color.Id, color.Red, color.Green, color.Blue, color.AdditionNote, color.AddTime, color.LastUpdateTime, color.Remark } });
-            }
-            catch (Exception ex)
-            {
-                return Ok(new { success = false, message = ""获取失败："" + ex.Message });
-            }
-        }
-    }
+        public const string DatabaseSampleIndexCodeBehindTemplate = @"using Microsoft.AspNetCore.Mvc;
+using Senparc.Ncf.Service;
+using Senparc.Ncf.Utility;
+using Template_OrgName.Xncf.Template_XncfName.Domain.Services;
+using System;
+using System.Linq;
+using System.Threading.Tasks;
+using Template_OrgName.Xncf.Template_XncfName.Domain.Models.DatabaseModel.Dto;
+
+namespace Template_OrgName.Xncf.Template_XncfName.Areas.Template_XncfName.Pages
+{
+    public class DatabaseSampleIndex : Senparc.Ncf.AreaBase.Admin.AdminXncfModulePageModelBase
+    {
+        private readonly ColorService _colorService;
+
+        public DatabaseSampleIndex(Lazy<XncfModuleService> xncfModuleService, ColorService colorService) : base(xncfModuleService)
+        {
+            _colorService = colorService;
+        }
+
+        public void OnGet()
+        {
+        }
+
+        /// <summary>
+        /// 获取颜色列表（分页）
+        /// </summary>
+        /// <param name=""keyword"">关键词</param>
+        /// <param name=""orderField"">排序字段</param>
+        /// <param name=""pageIndex"">页码</param>
+        /// <param name=""pageSize"">页大小</param>
+        /// <returns></returns>
+        public async Task<IActionResult> OnGetColorListAsync(string keyword, string orderField, int pageIndex, int pageSize)
+        {
+            try
+            {
+                // 调试信息
+                System.Diagnostics.Debug.WriteLine($""ColorList API Called - PageIndex: {pageIndex}, PageSize: {pageSize}, OrderField: {orderField}"");
+                
+                var seh = new SenparcExpressionHelper<Color>();
+                // 可以根据需要添加搜索条件
+                // seh.ValueCompare.AndAlso(!string.IsNullOrEmpty(keyword), _ => _.Remark.Contains(keyword));
+                var where = seh.BuildWhereExpression();
+                var response = await _colorService.GetObjectListAsync(pageIndex, pageSize, where, orderField ?? ""Id desc"");
+                
+                // 调试信息
+                System.Diagnostics.Debug.WriteLine($""Database Query Result - TotalCount: {response.TotalCount}, ItemCount: {response.Count()}"");
+                
+                var result = new
+                {
+                    success = true,
+                    message = ""数据获取成功"",
+                    data = new {
+                        totalCount = response.TotalCount,
+                        pageIndex = response.PageIndex,
+                        list = response.Select(_ => new
+                        {
+                            id = _.Id,
+                            red = _.Red,
+                            green = _.Green,
+                            blue = _.Blue,
+                            additionNote = _.AdditionNote,
+                            addTime = _.AddTime,
+                            lastUpdateTime = _.LastUpdateTime,
+                            remark = _.Remark
+                        }).ToList()
+                    }
+                };
+                
+                // 调试信息
+                System.Diagnostics.Debug.WriteLine($""API Response - ListCount: {result.data.list.Count}"");
+                
+                return Ok(result);
+            }
+            catch (Exception ex)
+            {
+                System.Diagnostics.Debug.WriteLine($""ColorList API Error: {ex.Message}"");
+                return Ok(new { 
+                    success = false, 
+                    message = ""获取数据失败: "" + ex.Message,
+                    totalCount = 0,
+                    pageIndex = pageIndex,
+                    list = new object[0]
+                });
+            }
+        }
+
+        /// <summary>
+        /// 创建新颜色
+        /// </summary>
+        /// <param name=""request"">创建颜色请求</param>
+        /// <returns></returns>
+        public async Task<IActionResult> OnPostCreateColorAsync([FromBody] CreateColorRequestDto request)
+        {
+            try
+            {
+                // 调试信息
+                System.Diagnostics.Debug.WriteLine($""CreateColor API Called - Red: {request.Red}, Green: {request.Green}, Blue: {request.Blue}, AdditionNote: {request.AdditionNote}"");
+                
+                if (request == null)
+                {
+                    return Ok(new { success = false, message = ""请求参数不能为空"" });
+                }
+                
+                var color = new Color(request.Red, request.Green, request.Blue, request.AdditionNote);
+                await _colorService.SaveObjectAsync(color);
+                
+                return Ok(new { success = true, message = ""颜色创建成功"", data = new { color.Id, color.Red, color.Green, color.Blue, color.AdditionNote, color.AddTime, color.LastUpdateTime } });
+            }
+            catch (Exception ex)
+            {
+                System.Diagnostics.Debug.WriteLine($""CreateColor API Error: {ex.Message}"");
+                return Ok(new { success = false, message = ""创建失败："" + ex.Message });
+            }
+        }
+
+        /// <summary>
+        /// 更新颜色
+        /// </summary>
+        /// <param name=""request"">更新颜色请求</param>
+        /// <returns></returns>
+        public async Task<IActionResult> OnPostUpdateColorAsync([FromBody] UpdateColorRequestDto request)
+        {
+            try
+            {
+                // 调试信息
+                System.Diagnostics.Debug.WriteLine($""UpdateColor API Called - Id: {request.Id}, Red: {request.Red}, Green: {request.Green}, Blue: {request.Blue}, AdditionNote: {request.AdditionNote}"");
+                
+                if (request == null)
+                {
+                    return Ok(new { success = false, message = ""请求参数不能为空"" });
+                }
+                
+                var color = await _colorService.GetObjectAsync(c => c.Id == request.Id);
+                if (color == null)
+                {
+                    return Ok(new { success = false, message = ""颜色不存在"" });
+                }
+
+                // 更新
+                color.Update(request);
+                
+                await _colorService.SaveObjectAsync(color);
+                
+                return Ok(new { success = true, message = ""颜色更新成功"", data = new { color.Id, color.Red, color.Green, color.Blue, color.AdditionNote, color.LastUpdateTime } });
+            }
+            catch (Exception ex)
+            {
+                System.Diagnostics.Debug.WriteLine($""UpdateColor API Error: {ex.Message}"");
+                return Ok(new { success = false, message = ""更新失败："" + ex.Message });
+            }
+        }
+
+        /// <summary>
+        /// 删除颜色
+        /// </summary>
+        /// <param name=""request"">删除颜色请求</param>
+        /// <returns></returns>
+        public async Task<IActionResult> OnPostDeleteColorAsync([FromBody] DeleteColorRequestDto request)
+        {
+            try
+            {
+                // 调试信息
+                System.Diagnostics.Debug.WriteLine($""DeleteColor API Called - Id: {request.Id}"");
+                
+                if (request == null)
+                {
+                    return Ok(new { success = false, message = ""请求参数不能为空"" });
+                }
+                
+                var color = await _colorService.GetObjectAsync(c => c.Id == request.Id);
+                if (color == null)
+                {
+                    return Ok(new { success = false, message = ""颜色不存在"" });
+                }
+
+                await _colorService.DeleteObjectAsync(color);
+                return Ok(new { success = true, message = ""颜色删除成功"" });
+            }
+            catch (Exception ex)
+            {
+                System.Diagnostics.Debug.WriteLine($""DeleteColor API Error: {ex.Message}"");
+                return Ok(new { success = false, message = ""删除失败："" + ex.Message });
+            }
+        }
+
+        /// <summary>
+        /// 随机化指定颜色
+        /// </summary>
+        /// <param name=""request"">随机化颜色请求</param>
+        /// <returns></returns>
+        public async Task<IActionResult> OnPostRandomizeColorAsync([FromBody] RandomizeColorRequestDto request)
+        {
+            try
+            {
+                // 调试信息
+                System.Diagnostics.Debug.WriteLine($""RandomizeColor API Called - Id: {request.Id}"");
+                
+                if (request == null)
+                {
+                    return Ok(new { success = false, message = ""请求参数不能为空"" });
+                }
+                
+                var color = await _colorService.GetObjectAsync(c => c.Id == request.Id);
+                if (color == null)
+                {
+                    return Ok(new { success = false, message = ""颜色不存在"" });
+                }
+
+                color.Random();
+                await _colorService.SaveObjectAsync(color);
+                
+                return Ok(new { success = true, message = ""颜色随机化成功"", data = new { color.Id, color.Red, color.Green, color.Blue, color.AdditionNote, color.LastUpdateTime } });
+            }
+            catch (Exception ex)
+            {
+                System.Diagnostics.Debug.WriteLine($""RandomizeColor API Error: {ex.Message}"");
+                return Ok(new { success = false, message = ""随机化失败："" + ex.Message });
+            }
+        }
+
+        /// <summary>
+        /// 获取颜色详情
+        /// </summary>
+        /// <param name=""id"">颜色ID</param>
+        /// <returns></returns>
+        public async Task<IActionResult> OnGetColorDetailAsync(int id)
+        {
+            try
+            {
+                var color = await _colorService.GetObjectAsync(c => c.Id == id);
+                if (color == null)
+                {
+                    return Ok(new { success = false, message = ""颜色不存在"" });
+                }
+
+                return Ok(new { success = true, data = new { color.Id, color.Red, color.Green, color.Blue, color.AdditionNote, color.AddTime, color.LastUpdateTime, color.Remark } });
+            }
+            catch (Exception ex)
+            {
+                return Ok(new { success = false, message = ""获取失败："" + ex.Message });
+            }
+        }
+    }
 } ";
 
         #endregion
@@ -795,433 +795,433 @@ public async Task<IActionResult> OnGetColorDetailAsync(int id)
         /// 数据库示例索引页面JavaScript模板
         /// 类型: frontend_script
         /// </summary>
-        public const string DatabaseSampleIndexJsTemplate = @"var app = new Vue({
-    el: ""#app"",
-    data() {
-        return {
-            page: {
-                page: 1,
-                size: 10
-            },
-            tableLoading: true,
-            tableData: [],
-            showDebug: false,
-            addFormDialogVisible: false,
-            addForm: {
-                red: 128,
-                green: 128,
-                blue: 128,
-                additionNote: ''
-            },
-            editFormDialogVisible: false,
-            editForm: {
-                id: 0,
-                red: 128,
-                green: 128,
-                blue: 128,
-                additionNote: ''
-            },
-            total: 0,
-            addRules: {
-                red: [
-                    { required: true, message: '请设置红色值', trigger: 'change' },
-                    { type: 'number', min: 0, max: 255, message: '红色值范围为0-255', trigger: 'change' }
-                ],
-                green: [
-                    { required: true, message: '请设置绿色值', trigger: 'change' },
-                    { type: 'number', min: 0, max: 255, message: '绿色值范围为0-255', trigger: 'change' }
-                ],
-                blue: [
-                    { required: true, message: '请设置蓝色值', trigger: 'change' },
-                    { type: 'number', min: 0, max: 255, message: '蓝色值范围为0-255', trigger: 'change' }
-                ]
-            },
-            editRules: {
-                red: [
-                    { required: true, message: '请设置红色值', trigger: 'change' },
-                    { type: 'number', min: 0, max: 255, message: '红色值范围为0-255', trigger: 'change' }
-                ],
-                green: [
-                    { required: true, message: '请设置绿色值', trigger: 'change' },
-                    { type: 'number', min: 0, max: 255, message: '绿色值范围为0-255', trigger: 'change' }
-                ],
-                blue: [
-                    { required: true, message: '请设置蓝色值', trigger: 'change' },
-                    { type: 'number', min: 0, max: 255, message: '蓝色值范围为0-255', trigger: 'change' }
-                ]
-            }
-        }
-    },
-    mounted() {
-        //wait page load  
-        setTimeout(async () => {
-            await this.init();
-        }, 100)
-    },
-    methods: {
-        async init() {
-            await this.getDataList();
-        },
-        async handleSizeChange(val) {
-            this.page.size = val;
-            await this.getDataList();
-        },
-        async handleCurrentChange(val) {
-            this.page.page = val;
-            await this.getDataList();
-        },
-        async getDataList() {
-            this.tableLoading = true
-            await service.get('/Admin/Template_XncfName/DatabaseSampleIndex?handler=ColorList', {
-                params: {
-                    pageIndex: this.page.page,
-                    pageSize: this.page.size,
-                    orderField: ""Id desc"",
-                    keyword: """"
-                }
-            })
-                .then(res => {
-                    console.log('=== API Response Debug ===');
-                    console.log('Complete Response:', res);
-                    console.log('Response Data:', res.data);
-                    console.log('Response Data Type:', typeof res.data);
-                    console.log('Has res.data.data?:', res.data && res.data.data);
-                    console.log('Has res.data.data.list?:', res.data && res.data.data && res.data.data.list);
-                    console.log('res.data.data.list value:', res.data && res.data.data ? res.data.data.list : 'nested data not found');
-                    console.log('==================');
-                    
-                    // 尝试多种可能的数据结构
-                    let dataList = null;
-                    let totalCount = 0;
-                    let dataSource = '';
-                    
-                    if (res.data && res.data.data && res.data.data.data && res.data.data.data.list) {
-                        // NCF框架标准格式 + 新的API格式: {data: {data: {success, message, data: {list, totalCount}}}}
-                        dataList = res.data.data.data.list;
-                        totalCount = res.data.data.data.totalCount || 0;
-                        dataSource = 'NCF标准格式: res.data.data.data.list';
-                        console.log('✅ 使用NCF标准格式: res.data.data.data.list');
-                        console.log('✅ List数据:', dataList);
-                        console.log('✅ TotalCount:', totalCount);
-                    } else if (res.data && res.data.data && res.data.data.list) {
-                        // 简单格式: {data: {list, totalCount}}
-                        dataList = res.data.data.list;
-                        totalCount = res.data.data.totalCount || 0;
-                        dataSource = '简单格式: res.data.data.list';
-                        console.log('✅ 使用简单格式: res.data.data.list');
-                    } else if (res.data && Array.isArray(res.data)) {
-                        // 如果data直接是数组
-                        dataList = res.data;
-                        totalCount = res.data.length;
-                        dataSource = '数组格式: res.data (array)';
-                        console.log('✅ 使用数组格式: res.data (array)');
-                    } else if (res && res.list) {
-                        // 如果list在顶层
-                        dataList = res.list;
-                        totalCount = res.totalCount || 0;
-                        dataSource = '顶层格式: res.list';
-                        console.log('✅ 使用顶层格式: res.list');
-                    } else {
-                        console.error('❌ 无法识别的数据格式:', res);
-                        console.log('🔍 尝试的路径:');
-                        console.log('- res.data.data.list:', res.data && res.data.data ? res.data.data.list : 'not found');
-                        console.log('- res.data.list:', res.data ? res.data.list : 'not found');
-                        console.log('- res.data (array):', res.data && Array.isArray(res.data) ? 'is array' : 'not array');
-                        console.log('- res.list:', res.list ? res.list : 'not found');
-                        dataList = [];
-                        totalCount = 0;
-                        dataSource = '无法识别格式';
-                    }
-                    
-                    console.log('🎯 Final dataList:', dataList);
-                    console.log('🎯 Final totalCount:', totalCount);
-                    console.log('🎯 Data source:', dataSource);
-                    
-                    // 数据赋值前的状态
-                    console.log('📋 赋值前 tableData:', this.tableData);
-                    console.log('📋 赋值前 total:', this.total);
-                    
-                    this.tableData = dataList || [];
-                    this.total = totalCount;
-                    
-                    // 数据赋值后的状态
-                    console.log('📋 赋值后 tableData:', this.tableData);
-                    console.log('📋 赋值后 tableData.length:', this.tableData.length);
-                    console.log('📋 赋值后 total:', this.total);
-                    
-                    // 强制Vue更新
-                    this.$forceUpdate();
-                    console.log('🔄 Vue已强制更新');
-                    
-                    // 延迟检查数据是否正确绑定
-                    setTimeout(() => {
-                        console.log('⏰ 延迟检查 tableData:', this.tableData);
-                        console.log('⏰ 延迟检查 tableData.length:', this.tableData ? this.tableData.length : 'null');
-                    }, 100);
-                    
-                    this.tableLoading = false
-                })
-                .catch(error => {
-                    console.error('获取数据失败:', error);
-                    this.tableLoading = false;
-                    this.$message.error('获取数据失败: ' + (error.message || error));
-                });
-        },
-        addColor() {
-            this.addFormDialogVisible = true;
-        },
-        refreshList() {
-            this.getDataList();
-        },
-        async addColorSubmit() {
-            this.$refs.addForm.validate(async (valid) => {
-                if (valid) {
-                    console.log('📤 发送创建请求:', {
-                        red: this.addForm.red,
-                        green: this.addForm.green,
-                        blue: this.addForm.blue,
-                        additionNote: this.addForm.additionNote
-                    });
-                    
-                    await service.post('/Admin/Template_XncfName/DatabaseSampleIndex?handler=CreateColor', {
-                        red: this.addForm.red,
-                        green: this.addForm.green,
-                        blue: this.addForm.blue,
-                        additionNote: this.addForm.additionNote
-                    }, {
-                        headers: {
-                            'Content-Type': 'application/json'
-                        }
-                    })
-                        .then(res => {
-                            console.log('📥 创建响应:', res);
-                            // 兼容NCF框架的嵌套响应格式
-                            const responseData = res.data.data || res.data;
-                            this.$message({
-                                type: responseData.success ? 'success' : 'error',
-                                message: responseData.message || '操作完成'
-                            });
-                            if (responseData.success) {
-                                this.getDataList()
-                                this.clearAddForm()
-                                this.addFormDialogVisible = false;
-                            }
-                        })
-                        .catch(error => {
-                            console.error('创建失败:', error);
-                            this.$message.error('创建失败');
-                        });
-                } else {
-                    return false;
-                }
-            });
-        },
-        clearAddForm() {
-            this.addForm = {
-                red: 128,
-                green: 128,
-                blue: 128,
-                additionNote: ''
-            };
-            if (this.$refs.addForm) {
-                this.$refs.addForm.resetFields();
-            }
-        },
-        clearEditForm() {
-            this.editForm = {
-                id: 0,
-                red: 128,
-                green: 128,
-                blue: 128,
-                additionNote: ''
-            };
-            if (this.$refs.editForm) {
-                this.$refs.editForm.resetFields();
-            }
-        },
-        async editColorSubmit() {
-            this.$refs.editForm.validate(async (valid) => {
-                if (valid) {
-                    console.log('📤 发送更新请求:', {
-                        id: this.editForm.id,
-                        red: this.editForm.red,
-                        green: this.editForm.green,
-                        blue: this.editForm.blue,
-                        additionNote: this.editForm.additionNote
-                    });
-                    
-                    await service.post('/Admin/Template_XncfName/DatabaseSampleIndex?handler=UpdateColor', {
-                        id: this.editForm.id,
-                        red: this.editForm.red,
-                        green: this.editForm.green,
-                        blue: this.editForm.blue,
-                        additionNote: this.editForm.additionNote
-                    }, {
-                        headers: {
-                            'Content-Type': 'application/json'
-                        }
-                    })
-                        .then(res => {
-                            console.log('📥 更新响应:', res);
-                            // 兼容NCF框架的嵌套响应格式
-                            const responseData = res.data.data || res.data;
-                            this.$message({
-                                type: responseData.success ? 'success' : 'error',
-                                message: responseData.message || '操作完成'
-                            });
-                            if (responseData.success) {
-                                this.getDataList()
-                                this.clearEditForm()
-                                this.editFormDialogVisible = false;
-                            }
-                        })
-                        .catch(error => {
-                            console.error('更新失败:', error);
-                            this.$message.error('更新失败');
-                        });
-                } else {
-                    return false;
-                }
-            });
-        },
-        dateformatter(date) {
-            if (!date) return '';
-            
-            try {
-                // 使用原生JavaScript格式化日期
-                const d = new Date(date);
-                
-                // 检查日期是否有效
-                if (isNaN(d.getTime())) {
-                    return date; // 如果无法解析，返回原始值
-                }
-                
-                // 格式化为 YYYY-MM-DD HH:mm:ss
-                const year = d.getFullYear();
-                const month = String(d.getMonth() + 1).padStart(2, '0');
-                const day = String(d.getDate()).padStart(2, '0');
-                const hours = String(d.getHours()).padStart(2, '0');
-                const minutes = String(d.getMinutes()).padStart(2, '0');
-                const seconds = String(d.getSeconds()).padStart(2, '0');
-                
-                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
-            } catch (error) {
-                console.warn('日期格式化错误:', error, '原始值:', date);
-                return date; // 如果格式化失败，返回原始值
-            }
-        },
-        editColor(row) {
-            this.editForm = {
-                id: row.id,
-                red: row.red,
-                green: row.green,
-                blue: row.blue,
-                additionNote: row.additionNote || ''
-            };
-            this.editFormDialogVisible = true;
-        },
-        deleteColor(row) {
-            this.$confirm('此操作将永久删除该颜色, 是否继续?', '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning'
-            }).then(async () => {
-                console.log('📤 发送删除请求:', { id: row.id });
-                
-                await service.post('/Admin/Template_XncfName/DatabaseSampleIndex?handler=DeleteColor', {
-                    id: row.id
-                }, {
-                    headers: {
-                        'Content-Type': 'application/json'
-                    }
-                })
-                    .then(res => {
-                        console.log('📥 删除响应:', res);
-                        // 兼容NCF框架的嵌套响应格式
-                        const responseData = res.data.data || res.data;
-                        this.$message({
-                            type: responseData.success ? 'success' : 'error',
-                            message: responseData.message || '操作完成'
-                        });
-                        if (responseData.success) {
-                            this.getDataList();
-                        }
-                    })
-                    .catch(error => {
-                        console.error('删除失败:', error);
-                        this.$message.error('删除失败');
-                    });
-            }).catch(() => {
-                this.$message({
-                    type: 'info',
-                    message: '已取消删除'
-                });
-            });
-        },
-        async randomizeColor(row) {
-            console.log('📤 发送随机化请求:', { id: row.id });
-            
-            await service.post('/Admin/Template_XncfName/DatabaseSampleIndex?handler=RandomizeColor', {
-                id: row.id
-            }, {
-                headers: {
-                    'Content-Type': 'application/json'
-                }
-            })
-                .then(res => {
-                    console.log('📥 随机化响应:', res);
-                    // 兼容NCF框架的嵌套响应格式
-                    const responseData = res.data.data || res.data;
-                    this.$message({
-                        type: responseData.success ? 'success' : 'error',
-                        message: responseData.message || '操作完成'
-                    });
-                    if (responseData.success) {
-                        this.getDataList();
-                    }
-                })
-                .catch(error => {
-                    console.error('随机化失败:', error);
-                    this.$message.error('随机化失败');
-                });
-        },
-        randomizeForm() {
-            this.addForm.red = Math.floor(Math.random() * 256);
-            this.addForm.green = Math.floor(Math.random() * 256);
-            this.addForm.blue = Math.floor(Math.random() * 256);
-        },
-        randomizeEditForm() {
-            this.editForm.red = Math.floor(Math.random() * 256);
-            this.editForm.green = Math.floor(Math.random() * 256);
-            this.editForm.blue = Math.floor(Math.random() * 256);
-        },
-        debugInfo() {
-            this.showDebug = !this.showDebug;
-            console.log('=== Vue Component Debug Info ===');
-            console.log('Current tableData:', this.tableData);
-            console.log('tableData length:', this.tableData ? this.tableData.length : 'null/undefined');
-            console.log('Total:', this.total);
-            console.log('Page:', this.page);
-            console.log('Table Loading:', this.tableLoading);
-            console.log('Show Debug:', this.showDebug);
-            console.log('Vue instance $el:', this.$el);
-            console.log('================================');
-            
-            // 测试Vue响应性
-            if (this.tableData && this.tableData.length === 0) {
-                console.log('测试：添加假数据');
-                this.tableData = [
-                    {id: 999, red: 255, green: 0, blue: 0, addTime: new Date().toISOString(), lastUpdateTime: new Date().toISOString(), remark: 'test'}
-                ];
-                this.total = 1;
-                setTimeout(() => {
-                    console.log('2秒后清除假数据');
-                    this.tableData = [];
-                    this.total = 0;
-                }, 2000);
-            }
-        }
-    }
+        public const string DatabaseSampleIndexJsTemplate = @"var app = new Vue({
+    el: ""#app"",
+    data() {
+        return {
+            page: {
+                page: 1,
+                size: 10
+            },
+            tableLoading: true,
+            tableData: [],
+            showDebug: false,
+            addFormDialogVisible: false,
+            addForm: {
+                red: 128,
+                green: 128,
+                blue: 128,
+                additionNote: ''
+            },
+            editFormDialogVisible: false,
+            editForm: {
+                id: 0,
+                red: 128,
+                green: 128,
+                blue: 128,
+                additionNote: ''
+            },
+            total: 0,
+            addRules: {
+                red: [
+                    { required: true, message: '请设置红色值', trigger: 'change' },
+                    { type: 'number', min: 0, max: 255, message: '红色值范围为0-255', trigger: 'change' }
+                ],
+                green: [
+                    { required: true, message: '请设置绿色值', trigger: 'change' },
+                    { type: 'number', min: 0, max: 255, message: '绿色值范围为0-255', trigger: 'change' }
+                ],
+                blue: [
+                    { required: true, message: '请设置蓝色值', trigger: 'change' },
+                    { type: 'number', min: 0, max: 255, message: '蓝色值范围为0-255', trigger: 'change' }
+                ]
+            },
+            editRules: {
+                red: [
+                    { required: true, message: '请设置红色值', trigger: 'change' },
+                    { type: 'number', min: 0, max: 255, message: '红色值范围为0-255', trigger: 'change' }
+                ],
+                green: [
+                    { required: true, message: '请设置绿色值', trigger: 'change' },
+                    { type: 'number', min: 0, max: 255, message: '绿色值范围为0-255', trigger: 'change' }
+                ],
+                blue: [
+                    { required: true, message: '请设置蓝色值', trigger: 'change' },
+                    { type: 'number', min: 0, max: 255, message: '蓝色值范围为0-255', trigger: 'change' }
+                ]
+            }
+        }
+    },
+    mounted() {
+        //wait page load  
+        setTimeout(async () => {
+            await this.init();
+        }, 100)
+    },
+    methods: {
+        async init() {
+            await this.getDataList();
+        },
+        async handleSizeChange(val) {
+            this.page.size = val;
+            await this.getDataList();
+        },
+        async handleCurrentChange(val) {
+            this.page.page = val;
+            await this.getDataList();
+        },
+        async getDataList() {
+            this.tableLoading = true
+            await service.get('/Admin/Template_XncfName/DatabaseSampleIndex?handler=ColorList', {
+                params: {
+                    pageIndex: this.page.page,
+                    pageSize: this.page.size,
+                    orderField: ""Id desc"",
+                    keyword: """"
+                }
+            })
+                .then(res => {
+                    console.log('=== API Response Debug ===');
+                    console.log('Complete Response:', res);
+                    console.log('Response Data:', res.data);
+                    console.log('Response Data Type:', typeof res.data);
+                    console.log('Has res.data.data?:', res.data && res.data.data);
+                    console.log('Has res.data.data.list?:', res.data && res.data.data && res.data.data.list);
+                    console.log('res.data.data.list value:', res.data && res.data.data ? res.data.data.list : 'nested data not found');
+                    console.log('==================');
+                    
+                    // 尝试多种可能的数据结构
+                    let dataList = null;
+                    let totalCount = 0;
+                    let dataSource = '';
+                    
+                    if (res.data && res.data.data && res.data.data.data && res.data.data.data.list) {
+                        // NCF框架标准格式 + 新的API格式: {data: {data: {success, message, data: {list, totalCount}}}}
+                        dataList = res.data.data.data.list;
+                        totalCount = res.data.data.data.totalCount || 0;
+                        dataSource = 'NCF标准格式: res.data.data.data.list';
+                        console.log('✅ 使用NCF标准格式: res.data.data.data.list');
+                        console.log('✅ List数据:', dataList);
+                        console.log('✅ TotalCount:', totalCount);
+                    } else if (res.data && res.data.data && res.data.data.list) {
+                        // 简单格式: {data: {list, totalCount}}
+                        dataList = res.data.data.list;
+                        totalCount = res.data.data.totalCount || 0;
+                        dataSource = '简单格式: res.data.data.list';
+                        console.log('✅ 使用简单格式: res.data.data.list');
+                    } else if (res.data && Array.isArray(res.data)) {
+                        // 如果data直接是数组
+                        dataList = res.data;
+                        totalCount = res.data.length;
+                        dataSource = '数组格式: res.data (array)';
+                        console.log('✅ 使用数组格式: res.data (array)');
+                    } else if (res && res.list) {
+                        // 如果list在顶层
+                        dataList = res.list;
+                        totalCount = res.totalCount || 0;
+                        dataSource = '顶层格式: res.list';
+                        console.log('✅ 使用顶层格式: res.list');
+                    } else {
+                        console.error('❌ 无法识别的数据格式:', res);
+                        console.log('🔍 尝试的路径:');
+                        console.log('- res.data.data.list:', res.data && res.data.data ? res.data.data.list : 'not found');
+                        console.log('- res.data.list:', res.data ? res.data.list : 'not found');
+                        console.log('- res.data (array):', res.data && Array.isArray(res.data) ? 'is array' : 'not array');
+                        console.log('- res.list:', res.list ? res.list : 'not found');
+                        dataList = [];
+                        totalCount = 0;
+                        dataSource = '无法识别格式';
+                    }
+                    
+                    console.log('🎯 Final dataList:', dataList);
+                    console.log('🎯 Final totalCount:', totalCount);
+                    console.log('🎯 Data source:', dataSource);
+                    
+                    // 数据赋值前的状态
+                    console.log('📋 赋值前 tableData:', this.tableData);
+                    console.log('📋 赋值前 total:', this.total);
+                    
+                    this.tableData = dataList || [];
+                    this.total = totalCount;
+                    
+                    // 数据赋值后的状态
+                    console.log('📋 赋值后 tableData:', this.tableData);
+                    console.log('📋 赋值后 tableData.length:', this.tableData.length);
+                    console.log('📋 赋值后 total:', this.total);
+                    
+                    // 强制Vue更新
+                    this.$forceUpdate();
+                    console.log('🔄 Vue已强制更新');
+                    
+                    // 延迟检查数据是否正确绑定
+                    setTimeout(() => {
+                        console.log('⏰ 延迟检查 tableData:', this.tableData);
+                        console.log('⏰ 延迟检查 tableData.length:', this.tableData ? this.tableData.length : 'null');
+                    }, 100);
+                    
+                    this.tableLoading = false
+                })
+                .catch(error => {
+                    console.error('获取数据失败:', error);
+                    this.tableLoading = false;
+                    this.$message.error('获取数据失败: ' + (error.message || error));
+                });
+        },
+        addColor() {
+            this.addFormDialogVisible = true;
+        },
+        refreshList() {
+            this.getDataList();
+        },
+        async addColorSubmit() {
+            this.$refs.addForm.validate(async (valid) => {
+                if (valid) {
+                    console.log('📤 发送创建请求:', {
+                        red: this.addForm.red,
+                        green: this.addForm.green,
+                        blue: this.addForm.blue,
+                        additionNote: this.addForm.additionNote
+                    });
+                    
+                    await service.post('/Admin/Template_XncfName/DatabaseSampleIndex?handler=CreateColor', {
+                        red: this.addForm.red,
+                        green: this.addForm.green,
+                        blue: this.addForm.blue,
+                        additionNote: this.addForm.additionNote
+                    }, {
+                        headers: {
+                            'Content-Type': 'application/json'
+                        }
+                    })
+                        .then(res => {
+                            console.log('📥 创建响应:', res);
+                            // 兼容NCF框架的嵌套响应格式
+                            const responseData = res.data.data || res.data;
+                            this.$message({
+                                type: responseData.success ? 'success' : 'error',
+                                message: responseData.message || '操作完成'
+                            });
+                            if (responseData.success) {
+                                this.getDataList()
+                                this.clearAddForm()
+                                this.addFormDialogVisible = false;
+                            }
+                        })
+                        .catch(error => {
+                            console.error('创建失败:', error);
+                            this.$message.error('创建失败');
+                        });
+                } else {
+                    return false;
+                }
+            });
+        },
+        clearAddForm() {
+            this.addForm = {
+                red: 128,
+                green: 128,
+                blue: 128,
+                additionNote: ''
+            };
+            if (this.$refs.addForm) {
+                this.$refs.addForm.resetFields();
+            }
+        },
+        clearEditForm() {
+            this.editForm = {
+                id: 0,
+                red: 128,
+                green: 128,
+                blue: 128,
+                additionNote: ''
+            };
+            if (this.$refs.editForm) {
+                this.$refs.editForm.resetFields();
+            }
+        },
+        async editColorSubmit() {
+            this.$refs.editForm.validate(async (valid) => {
+                if (valid) {
+                    console.log('📤 发送更新请求:', {
+                        id: this.editForm.id,
+                        red: this.editForm.red,
+                        green: this.editForm.green,
+                        blue: this.editForm.blue,
+                        additionNote: this.editForm.additionNote
+                    });
+                    
+                    await service.post('/Admin/Template_XncfName/DatabaseSampleIndex?handler=UpdateColor', {
+                        id: this.editForm.id,
+                        red: this.editForm.red,
+                        green: this.editForm.green,
+                        blue: this.editForm.blue,
+                        additionNote: this.editForm.additionNote
+                    }, {
+                        headers: {
+                            'Content-Type': 'application/json'
+                        }
+                    })
+                        .then(res => {
+                            console.log('📥 更新响应:', res);
+                            // 兼容NCF框架的嵌套响应格式
+                            const responseData = res.data.data || res.data;
+                            this.$message({
+                                type: responseData.success ? 'success' : 'error',
+                                message: responseData.message || '操作完成'
+                            });
+                            if (responseData.success) {
+                                this.getDataList()
+                                this.clearEditForm()
+                                this.editFormDialogVisible = false;
+                            }
+                        })
+                        .catch(error => {
+                            console.error('更新失败:', error);
+                            this.$message.error('更新失败');
+                        });
+                } else {
+                    return false;
+                }
+            });
+        },
+        dateformatter(date) {
+            if (!date) return '';
+            
+            try {
+                // 使用原生JavaScript格式化日期
+                const d = new Date(date);
+                
+                // 检查日期是否有效
+                if (isNaN(d.getTime())) {
+                    return date; // 如果无法解析，返回原始值
+                }
+                
+                // 格式化为 YYYY-MM-DD HH:mm:ss
+                const year = d.getFullYear();
+                const month = String(d.getMonth() + 1).padStart(2, '0');
+                const day = String(d.getDate()).padStart(2, '0');
+                const hours = String(d.getHours()).padStart(2, '0');
+                const minutes = String(d.getMinutes()).padStart(2, '0');
+                const seconds = String(d.getSeconds()).padStart(2, '0');
+                
+                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+            } catch (error) {
+                console.warn('日期格式化错误:', error, '原始值:', date);
+                return date; // 如果格式化失败，返回原始值
+            }
+        },
+        editColor(row) {
+            this.editForm = {
+                id: row.id,
+                red: row.red,
+                green: row.green,
+                blue: row.blue,
+                additionNote: row.additionNote || ''
+            };
+            this.editFormDialogVisible = true;
+        },
+        deleteColor(row) {
+            this.$confirm('此操作将永久删除该颜色, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(async () => {
+                console.log('📤 发送删除请求:', { id: row.id });
+                
+                await service.post('/Admin/Template_XncfName/DatabaseSampleIndex?handler=DeleteColor', {
+                    id: row.id
+                }, {
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                })
+                    .then(res => {
+                        console.log('📥 删除响应:', res);
+                        // 兼容NCF框架的嵌套响应格式
+                        const responseData = res.data.data || res.data;
+                        this.$message({
+                            type: responseData.success ? 'success' : 'error',
+                            message: responseData.message || '操作完成'
+                        });
+                        if (responseData.success) {
+                            this.getDataList();
+                        }
+                    })
+                    .catch(error => {
+                        console.error('删除失败:', error);
+                        this.$message.error('删除失败');
+                    });
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '已取消删除'
+                });
+            });
+        },
+        async randomizeColor(row) {
+            console.log('📤 发送随机化请求:', { id: row.id });
+            
+            await service.post('/Admin/Template_XncfName/DatabaseSampleIndex?handler=RandomizeColor', {
+                id: row.id
+            }, {
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            })
+                .then(res => {
+                    console.log('📥 随机化响应:', res);
+                    // 兼容NCF框架的嵌套响应格式
+                    const responseData = res.data.data || res.data;
+                    this.$message({
+                        type: responseData.success ? 'success' : 'error',
+                        message: responseData.message || '操作完成'
+                    });
+                    if (responseData.success) {
+                        this.getDataList();
+                    }
+                })
+                .catch(error => {
+                    console.error('随机化失败:', error);
+                    this.$message.error('随机化失败');
+                });
+        },
+        randomizeForm() {
+            this.addForm.red = Math.floor(Math.random() * 256);
+            this.addForm.green = Math.floor(Math.random() * 256);
+            this.addForm.blue = Math.floor(Math.random() * 256);
+        },
+        randomizeEditForm() {
+            this.editForm.red = Math.floor(Math.random() * 256);
+            this.editForm.green = Math.floor(Math.random() * 256);
+            this.editForm.blue = Math.floor(Math.random() * 256);
+        },
+        debugInfo() {
+            this.showDebug = !this.showDebug;
+            console.log('=== Vue Component Debug Info ===');
+            console.log('Current tableData:', this.tableData);
+            console.log('tableData length:', this.tableData ? this.tableData.length : 'null/undefined');
+            console.log('Total:', this.total);
+            console.log('Page:', this.page);
+            console.log('Table Loading:', this.tableLoading);
+            console.log('Show Debug:', this.showDebug);
+            console.log('Vue instance $el:', this.$el);
+            console.log('================================');
+            
+            // 测试Vue响应性
+            if (this.tableData && this.tableData.length === 0) {
+                console.log('测试：添加假数据');
+                this.tableData = [
+                    {id: 999, red: 255, green: 0, blue: 0, addTime: new Date().toISOString(), lastUpdateTime: new Date().toISOString(), remark: 'test'}
+                ];
+                this.total = 1;
+                setTimeout(() => {
+                    console.log('2秒后清除假数据');
+                    this.tableData = [];
+                    this.total = 0;
+                }, 2000);
+            }
+        }
+    }
 }); ";
 
         #endregion
@@ -1232,224 +1232,224 @@ await service.post('/Admin/Template_XncfName/DatabaseSampleIndex?handler=Randomi
         /// 数据库示例索引页面CSS模板
         /// 类型: frontend_style
         /// </summary>
-        public const string DatabaseSampleIndexCssTemplate = @"/* 通用样式 */
-.d-flex{
-    display: flex;
-}
-.justify-content-between{
-    justify-content: space-between;
-}
-.align-items-center{
-    align-items: center;
-}
-
-/* 过滤器容器样式 */
-.filter-container {
-    margin-bottom: 20px;
-    padding: 10px 0;
-}
-
-.filter-container .el-button {
-    margin-right: 10px;
-}
-
-/* 颜色预览样式 */
-.color-preview {
-    width: 100%;
-    height: 40px;
-    border-radius: 4px;
-    border: 1px solid #dcdfe6;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-size: 12px;
-    font-weight: bold;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
-}
-
-.color-preview-large {
-    width: 100%;
-    height: 80px;
-    border-radius: 8px;
-    border: 2px solid #dcdfe6;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-size: 16px;
-    font-weight: bold;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
-    margin: 10px 0;
-    transition: all 0.3s ease;
-}
-
-.color-preview-large:hover {
-    transform: scale(1.02);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-}
-
-/* 分页容器样式 */
-.pagination-container {
-    margin-top: 20px;
-    text-align: center;
-}
-
-/* 表格样式增强 */
-.el-table {
-    border-radius: 8px;
-    overflow: hidden;
-    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
-}
-
-.el-table th {
-    background-color: #fafafa;
-    color: #333;
-    font-weight: 600;
-}
-
-/* 颜色标签样式 */
-.el-tag {
-    min-width: 50px;
-    text-align: center;
-    font-weight: bold;
-    border: none !important;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
-}
-
-/* 对话框样式 */
-.el-dialog {
-    border-radius: 12px;
-    overflow: hidden;
-}
-
-.el-dialog__header {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-    padding: 20px 20px 0 20px;
-}
-
-.el-dialog__title {
-    color: white;
-    font-weight: 600;
-}
-
-.el-dialog__body {
-    padding: 30px 20px;
-}
-
-/* 滑块样式 */
-.el-slider {
-    margin: 20px 0;
-}
-
-.el-slider__runway {
-    height: 6px;
-    background-color: #e4e7ed;
-    border-radius: 3px;
-}
-
-.el-slider__button {
-    width: 20px;
-    height: 20px;
-    border: 2px solid #409eff;
-}
-
-/* 按钮样式增强 */
-.el-button--mini {
-    padding: 5px 10px;
-    font-size: 12px;
-    border-radius: 4px;
-}
-
-.el-button--primary {
-    background: linear-gradient(135deg, #409eff 0%, #3a8ee6 100%);
-    border: none;
-}
-
-.el-button--success {
-    background: linear-gradient(135deg, #67c23a 0%, #5daf34 100%);
-    border: none;
-}
-
-.el-button--warning {
-    background: linear-gradient(135deg, #e6a23c 0%, #cf9236 100%);
-    border: none;
-}
-
-.el-button--danger {
-    background: linear-gradient(135deg, #f56c6c 0%, #f25c5c 100%);
-    border: none;
-}
-
-.el-button--info {
-    background: linear-gradient(135deg, #909399 0%, #82848a 100%);
-    border: none;
-}
-
-/* 表单项样式 */
-.el-form-item {
-    margin-bottom: 22px;
-}
-
-.el-form-item__label {
-    font-weight: 600;
-    color: #333;
-}
-
-/* 加载动画样式 */
-.el-loading-mask {
-    background-color: rgba(255, 255, 255, 0.9);
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-    .filter-container {
-        text-align: center;
-    }
-    
-    .filter-container .el-button {
-        margin: 5px;
-        width: auto;
-    }
-    
-    .color-preview {
-        height: 30px;
-        font-size: 10px;
-    }
-    
-    .color-preview-large {
-        height: 60px;
-        font-size: 14px;
-    }
-}
-
-/* 动画效果 */
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.el-table tbody tr {
-    animation: fadeIn 0.3s ease-out;
-}
-
-/* 鼠标悬停效果 */
-.el-table tbody tr:hover {
-    background-color: #f5f7fa !important;
-    transition: background-color 0.3s ease;
-}
-
-.el-button:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
-    transition: all 0.3s ease;
+        public const string DatabaseSampleIndexCssTemplate = @"/* 通用样式 */
+.d-flex{
+    display: flex;
+}
+.justify-content-between{
+    justify-content: space-between;
+}
+.align-items-center{
+    align-items: center;
+}
+
+/* 过滤器容器样式 */
+.filter-container {
+    margin-bottom: 20px;
+    padding: 10px 0;
+}
+
+.filter-container .el-button {
+    margin-right: 10px;
+}
+
+/* 颜色预览样式 */
+.color-preview {
+    width: 100%;
+    height: 40px;
+    border-radius: 4px;
+    border: 1px solid #dcdfe6;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 12px;
+    font-weight: bold;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+}
+
+.color-preview-large {
+    width: 100%;
+    height: 80px;
+    border-radius: 8px;
+    border: 2px solid #dcdfe6;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 16px;
+    font-weight: bold;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
+    margin: 10px 0;
+    transition: all 0.3s ease;
+}
+
+.color-preview-large:hover {
+    transform: scale(1.02);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+/* 分页容器样式 */
+.pagination-container {
+    margin-top: 20px;
+    text-align: center;
+}
+
+/* 表格样式增强 */
+.el-table {
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+}
+
+.el-table th {
+    background-color: #fafafa;
+    color: #333;
+    font-weight: 600;
+}
+
+/* 颜色标签样式 */
+.el-tag {
+    min-width: 50px;
+    text-align: center;
+    font-weight: bold;
+    border: none !important;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+}
+
+/* 对话框样式 */
+.el-dialog {
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+.el-dialog__header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 20px 20px 0 20px;
+}
+
+.el-dialog__title {
+    color: white;
+    font-weight: 600;
+}
+
+.el-dialog__body {
+    padding: 30px 20px;
+}
+
+/* 滑块样式 */
+.el-slider {
+    margin: 20px 0;
+}
+
+.el-slider__runway {
+    height: 6px;
+    background-color: #e4e7ed;
+    border-radius: 3px;
+}
+
+.el-slider__button {
+    width: 20px;
+    height: 20px;
+    border: 2px solid #409eff;
+}
+
+/* 按钮样式增强 */
+.el-button--mini {
+    padding: 5px 10px;
+    font-size: 12px;
+    border-radius: 4px;
+}
+
+.el-button--primary {
+    background: linear-gradient(135deg, #409eff 0%, #3a8ee6 100%);
+    border: none;
+}
+
+.el-button--success {
+    background: linear-gradient(135deg, #67c23a 0%, #5daf34 100%);
+    border: none;
+}
+
+.el-button--warning {
+    background: linear-gradient(135deg, #e6a23c 0%, #cf9236 100%);
+    border: none;
+}
+
+.el-button--danger {
+    background: linear-gradient(135deg, #f56c6c 0%, #f25c5c 100%);
+    border: none;
+}
+
+.el-button--info {
+    background: linear-gradient(135deg, #909399 0%, #82848a 100%);
+    border: none;
+}
+
+/* 表单项样式 */
+.el-form-item {
+    margin-bottom: 22px;
+}
+
+.el-form-item__label {
+    font-weight: 600;
+    color: #333;
+}
+
+/* 加载动画样式 */
+.el-loading-mask {
+    background-color: rgba(255, 255, 255, 0.9);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .filter-container {
+        text-align: center;
+    }
+    
+    .filter-container .el-button {
+        margin: 5px;
+        width: auto;
+    }
+    
+    .color-preview {
+        height: 30px;
+        font-size: 10px;
+    }
+    
+    .color-preview-large {
+        height: 60px;
+        font-size: 14px;
+    }
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.el-table tbody tr {
+    animation: fadeIn 0.3s ease-out;
+}
+
+/* 鼠标悬停效果 */
+.el-table tbody tr:hover {
+    background-color: #f5f7fa !important;
+    transition: background-color 0.3s ease;
+}
+
+.el-button:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+    transition: all 0.3s ease;
 } ";
 
         #endregion