尧图网站建设 
TencentDB-Agent-Memory 团队记忆控制台前端MemoryPanel Web 开发与部署实战指南【免费下载链接】TencentDB-Agent-MemoryTencentDB Agent Memory is a team-level memory hub for AI Agents — turning conversations, docs, and code into four reusable memory assets (Chat Memory, Skill, LLM-Wiki, Code-Graph) that are governed, shared, and equipped across agents and frameworks.项目地址: https://gitcode.com/GitHub_Trending/te/TencentDB-Agent-Memory本指南以仓库中 MemoryPanel/web/README.md 为骨架完整讲解 Team Memory Control 管理界面的技术栈、本地开发启动流程、Vite 开发代理配置、生产构建产物托管方式以及前端与 Control API 的对接边界与凭证安全规范。读完本文你将能够在本地一键拉起 Control 前端两套服务理解/api/v1与/v3两条请求链路的代理规则并掌握基于X-Tdai-Service-Id/X-Tdai-User-Key的无 Cookie 无状态登录与请求鉴权机制。一、项目定位无状态 Control 的 Web 管理界面MemoryPanel/web是 Team Memory Control简称 Control的 Web 管理界面负责对接同仓库的无状态 Control 服务。Control 本身是一个不保存服务端登录会话、不维护本地用户数据库的团队记忆管理控制台用于管理团队、用户、Agent、任务及其关联的 Skill、Wiki、Code Graph 和 Chat Memory 资产参见 MemoryPanel/README.md。前端在整个体系中的职责可以概括为三层管理界面通过浏览器提供团队、成员、Agent、API Key、Skill、Wiki、Code Graph、Chat Memory 与任务工作台的可视化管理入口凭证持有者登录凭证由前端自行持有并缓存无 Cookie、无服务端会话每次业务请求通过自定义 Header 注入请求代理消费者开发期依赖 Vite Dev Server 的代理能力把不同前缀的请求分发到 Control/api/v1与记忆网关/v3两套后端。二、技术栈与目录结构2.1 技术栈按 package.json 实际依赖前端技术栈如下类别选型框架React 18react^18.3.1语言TypeScript 5构建工具Vite 6vite^6.0.7vitejs/plugin-react路由React Routerreact-router-dom^7.18.1采用 HashRouter状态管理Zustandzustand^5.0.14样式Tailwind CSS 3 tailwindcss/typography TDesigntea-component国际化i18next react-i18next图可视化sigma / graphology用于 Code Graph 与 Wiki 知识图谱其他lucide-react 图标、sonner 提示、react-markdown remark-gfm 渲染 Markdown值得注意的是前端使用createHashRouter见 routes/index.tsx而非 BrowserRouter。源码注释说明这是为了保持与旧版 hash 路由兼容避免刷新 404静态部署不需要服务端 fallback 配置——这意味着构建产物可以直接以纯静态方式托管无需在 Web 服务器上配置 SPA fallback 规则。2.2 源码目录脉络从 src 目录结构看前端代码按职责划分src/ ├── components/ # 通用组件登录门、Markdown 渲染、路由守卫、设置弹窗 ├── constants/ # 菜单等常量 ├── i18n/ # zh-CN / en-US 双语资源 ├── layouts/ # GlobalHeader、TabBar、ConsoleLayout 整体布局 ├── lib/ │ └── api/ # 对 Control API 的分域封装base / auth / teams / users / agents / assets / skills / tasks / chat-memory / meta-instances ├── pages/ # Workbench、Wiki、Code、Skills、ChatMemory、Team 各业务页面 ├── routes/ # 路由表HashRouter ├── services/ # 账号、资产范围、权限、当前角色等业务 store ├── stores/ # auth / backend 状态 └── utils/路由表定义了 8 个核心页面工作台/、Wiki/wiki、Code/code、Skills/skills、Chat Memory/memory、成员/team/members、Agent/team/agents、API Key/team/api-keys全部挂在ConsoleLayout父路由之下。三、本地开发完整启动流程前端依赖 Control 后端才能正常工作因此正确顺序是先启动 Control再启动前端。3.1 第一步启动 Control仓库根目录 / MemoryPanel在仓库根目录即MemoryPanel/执行pnpm install cp .env.example .env cp config/metadata-instances.example.json config/metadata-instances.json pnpm dev三点实操提示config/metadata-instances.json是实例注册表内含部署环境提供的实例 ID、Gateway 地址和 API Key属于敏感文件已被 Git 忽略不得提交字段说明见 metadata-instances.README.md 与 metadata-instances.example.jsonControl 默认监听http://127.0.0.1:8123健康检查端点为GET /health使用 Wiki 或 Code Graph 功能时还需要可访问的 Knowledge Service 与 Memory Gateway 作为外部依赖。3.2 第二步启动前端cd web npm install cp .env.example .env npm run dev浏览器访问http://127.0.0.1:5173即可打开管理界面。.env.example中给出了两个可选环境变量详见 .env.example# Control 后端地址vite proxy默认 http://127.0.0.1:8123 # VITE_TMC_BACKEND_URLhttp://127.0.0.1:8123 # 记忆 Gateway可选/v3 代理默认 http://127.0.0.1:8420 # VITE_SKILL_GATEWAY_URLhttp://127.0.0.1:8420注意Vite 不会热加载环境变量修改.env后需要重启 dev server 才会生效。3.3 前端包管理说明后端使用 pnpm、前端使用 npm见 MemoryPanel/README.md 与 package.json两个目录的依赖互相独立务必在对应目录下分别安装不要混用包管理器。四、开发代理双链路请求转发vite.config.ts是前端开发期的路由器。对照源码 vite.config.ts默认代理配置如下请求前缀默认目标环境变量说明/api/v1、/healthhttp://127.0.0.1:8123VITE_TMC_BACKEND_URL链路 AControl 后端Meta / Skill / Chat Memory / Knowledge / Agent 等公开 API/v3http://127.0.0.1:8420VITE_SKILL_GATEWAY_URL记忆网关/v3/skill/*等数据面接口从源码可以看到两个关键实现细节host: 0.0.0.0开发服务器对所有网卡开放方便容器或局域网内其他设备访问而 Control 后端默认只监听 127.0.0.1changeOrigin: true代理时会改写请求头中的 Host 为后端目标避免后端因 Host 校验而拒绝请求。如需连接其他开发环境请在未提交的web/.env中写入实际地址通过VITE_TMC_BACKEND_URL/VITE_SKILL_GATEWAY_URL覆盖默认目标不要把内部地址、账号或凭证写入 README、源码或已跟踪的环境文件。五、生产构建与产物托管npm run buildbuild脚本实际执行tsc vite build见 package.json即先做 TypeScript 类型检查、再执行 Vite 构建任何类型错误都会直接中断构建。产物输出到web/dist/源码中outDir: dist且emptyOutDir: true。Control 支持通过UI_DIST_DIR./web/dist配置项同源托管这些静态文件——即由 Control 服务直接对外提供页面与 API前端无需单独部署 Nginx 或静态服务器。结合前面提到的 HashRouter这种静态托管不需要任何 SPA fallback 规则即可支持页面刷新与深链直达。构建完成后可用npm run preview本地预览产物效果。六、API 边界前端对接的公开契约6.1 前端使用的 Control API前端仅对接以下 Control 公开 API 前缀同时登记在 MemoryPanel/README.md 中/api/v1/meta/*实例、身份与元数据管理/api/v1/skill/*Skill 管理/api/v1/chat-memory/*Chat Memory 管理/api/v1/knowledge/*Wiki 与 Code Graph 管理/api/v1/agent-overview/*Agent 资产聚合/api/v1/agent/*Agent 生命周期操作对接边界以仓库 docs/api 下的公开契约为准如 meta-api.openapi.yaml未列入公开契约的外部服务接口不属于前端对接范围前端也不得直接调用。6.2 无 Cookie 鉴权模型Header 注入README 强调登录凭证保存在浏览器localStorage业务请求通过X-Tdai-Service-Id和X-Tdai-User-KeyHeader 发送。源码给出了完整的实现证据链会话缓存panelSession.ts登录凭证instanceIduserKey 可选的user以 JSON 形式缓存在localStorage的tdai-panel.session键下。源码注释说明早期版本曾用sessionStoragetab 级新开 tab 需重新登录改为localStorage后多 tab 共享登录态登出时通过 storage 事件同步请求注入base.tsmetaPost每次请求自动从会话中读取凭证并注入两个 Header——X-Tdai-Service-Id实例 ID即注册表 id 内核x-tdai-service-id与X-Tdai-User-Key用户 API Key⚠️ Header 名以meta-api.openapi.yamlv1.1.0 为准早期文档使用的X-Metadata-Instance-Id已改名若仍按旧名发送Control 会返回400 MISSING_INSTANCE_ID登录验活auth.ts登录流程为 ①GET /meta/instances选择实例 → ② 用户输入自持的user_keysk-mem-…格式→ ③POST /meta/auth/verify此时 Header 仅带X-Tdai-Service-Iduser_key只放 body→ ④ 返回valid true后把凭证写入会话401 全局处理请求层在收到 401 时会派发auth:unauthorized自定义事件App 层监听后清空 auth 状态并展示登录页Meta 信封解析所有 Meta 接口返回统一信封code ! 0或data为空时按错误处理并优先从信封中提取message/request_id构造可读错误信息error-message.ts 负责最终格式化。安全底线前端不得记录、展示或上传完整凭证。user_key是用户凭证只能通过请求 Header 传递实例注册表中的api_key仅供服务端调用外部服务绝不返回浏览器。七、常用命令速查命令说明npm run dev启动 Vite 开发服务器默认端口 5173npm run mock以 mock 入口启动VITE_ENTRYmock vitenpm run buildTypeScript 类型检查并构建到web/dist/npm run preview本地预览构建产物npm run lint:checkESLint 检查src/**/*.{ts,tsx}lint带--fix自动修复npm run format:checkPrettier 格式检查src/**/*.{ts,tsx,css}format自动格式化八、安全与提交规范综合前端 README 与 MemoryPanel/README.md 的安全要求前端开发与提交需遵守.env、真实实例注册表、日志和测试报告不得提交到版本库文档与示例只能使用example.com、回环地址及明显占位符禁止出现内部地址、账号或凭证提交前建议运行bash scripts/secret-scan.sh --strict扫描敏感信息脚本位于 MemoryPanel/scripts/secret-scan.sh若凭证曾进入 Git 历史应立即轮换凭证并在发布前清理历史记录。九、小结MemoryPanel/web是一个典型的无状态后端 纯前端凭证持有管理控制台实现本地开发依赖 Vite 代理把/api/v1与/v3双链路分别转发给 Control 与记忆网关生产构建产物可直接交给 Control 同源托管鉴权完全基于localStorage会话与X-Tdai-Service-Id/X-Tdai-User-KeyHeader 注入无 Cookie、无服务端会话。理解这套启动流程、代理边界与凭证模型是继续深入阅读前端各业务页面pages、API 分域封装lib/api以及 Meta OpenAPI 契约 的前提。【免费下载链接】TencentDB-Agent-MemoryTencentDB Agent Memory is a team-level memory hub for AI Agents — turning conversations, docs, and code into four reusable memory assets (Chat Memory, Skill, LLM-Wiki, Code-Graph) that are governed, shared, and equipped across agents and frameworks.项目地址: https://gitcode.com/GitHub_Trending/te/TencentDB-Agent-Memory创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 TencentDB-Agent-Memory 团队记忆控制台前端：MemoryPanel Web 开发与部署实战指南
TencentDB-Agent-Memory 团队记忆控制台前端MemoryPanel Web 开发与部署实战指南【免费下载链接】TencentDB-Agent-MemoryTencentDB Agent Memory is a team-level memory hub for AI Agents — turning conversations, docs, and code into four reusable memory assets (Chat Memory, Skill, LLM-Wiki, Code-Graph) that are governed, shared, and equipped across agents and frameworks.项目地址: https://gitcode.com/GitHub_Trending/te/TencentDB-Agent-Memory本指南以仓库中 MemoryPanel/web/README.md 为骨架完整讲解 Team Memory Control 管理界面的技术栈、本地开发启动流程、Vite 开发代理配置、生产构建产物托管方式以及前端与 Control API 的对接边界与凭证安全规范。读完本文你将能够在本地一键拉起 Control 前端两套服务理解/api/v1与/v3两条请求链路的代理规则并掌握基于X-Tdai-Service-Id/X-Tdai-User-Key的无 Cookie 无状态登录与请求鉴权机制。一、项目定位无状态 Control 的 Web 管理界面MemoryPanel/web是 Team Memory Control简称 Control的 Web 管理界面负责对接同仓库的无状态 Control 服务。Control 本身是一个不保存服务端登录会话、不维护本地用户数据库的团队记忆管理控制台用于管理团队、用户、Agent、任务及其关联的 Skill、Wiki、Code Graph 和 Chat Memory 资产参见 MemoryPanel/README.md。前端在整个体系中的职责可以概括为三层管理界面通过浏览器提供团队、成员、Agent、API Key、Skill、Wiki、Code Graph、Chat Memory 与任务工作台的可视化管理入口凭证持有者登录凭证由前端自行持有并缓存无 Cookie、无服务端会话每次业务请求通过自定义 Header 注入请求代理消费者开发期依赖 Vite Dev Server 的代理能力把不同前缀的请求分发到 Control/api/v1与记忆网关/v3两套后端。二、技术栈与目录结构2.1 技术栈按 package.json 实际依赖前端技术栈如下类别选型框架React 18react^18.3.1语言TypeScript 5构建工具Vite 6vite^6.0.7vitejs/plugin-react路由React Routerreact-router-dom^7.18.1采用 HashRouter状态管理Zustandzustand^5.0.14样式Tailwind CSS 3 tailwindcss/typography TDesigntea-component国际化i18next react-i18next图可视化sigma / graphology用于 Code Graph 与 Wiki 知识图谱其他lucide-react 图标、sonner 提示、react-markdown remark-gfm 渲染 Markdown值得注意的是前端使用createHashRouter见 routes/index.tsx而非 BrowserRouter。源码注释说明这是为了保持与旧版 hash 路由兼容避免刷新 404静态部署不需要服务端 fallback 配置——这意味着构建产物可以直接以纯静态方式托管无需在 Web 服务器上配置 SPA fallback 规则。2.2 源码目录脉络从 src 目录结构看前端代码按职责划分src/ ├── components/ # 通用组件登录门、Markdown 渲染、路由守卫、设置弹窗 ├── constants/ # 菜单等常量 ├── i18n/ # zh-CN / en-US 双语资源 ├── layouts/ # GlobalHeader、TabBar、ConsoleLayout 整体布局 ├── lib/ │ └── api/ # 对 Control API 的分域封装base / auth / teams / users / agents / assets / skills / tasks / chat-memory / meta-instances ├── pages/ # Workbench、Wiki、Code、Skills、ChatMemory、Team 各业务页面 ├── routes/ # 路由表HashRouter ├── services/ # 账号、资产范围、权限、当前角色等业务 store ├── stores/ # auth / backend 状态 └── utils/路由表定义了 8 个核心页面工作台/、Wiki/wiki、Code/code、Skills/skills、Chat Memory/memory、成员/team/members、Agent/team/agents、API Key/team/api-keys全部挂在ConsoleLayout父路由之下。三、本地开发完整启动流程前端依赖 Control 后端才能正常工作因此正确顺序是先启动 Control再启动前端。3.1 第一步启动 Control仓库根目录 / MemoryPanel在仓库根目录即MemoryPanel/执行pnpm install cp .env.example .env cp config/metadata-instances.example.json config/metadata-instances.json pnpm dev三点实操提示config/metadata-instances.json是实例注册表内含部署环境提供的实例 ID、Gateway 地址和 API Key属于敏感文件已被 Git 忽略不得提交字段说明见 metadata-instances.README.md 与 metadata-instances.example.jsonControl 默认监听http://127.0.0.1:8123健康检查端点为GET /health使用 Wiki 或 Code Graph 功能时还需要可访问的 Knowledge Service 与 Memory Gateway 作为外部依赖。3.2 第二步启动前端cd web npm install cp .env.example .env npm run dev浏览器访问http://127.0.0.1:5173即可打开管理界面。.env.example中给出了两个可选环境变量详见 .env.example# Control 后端地址vite proxy默认 http://127.0.0.1:8123 # VITE_TMC_BACKEND_URLhttp://127.0.0.1:8123 # 记忆 Gateway可选/v3 代理默认 http://127.0.0.1:8420 # VITE_SKILL_GATEWAY_URLhttp://127.0.0.1:8420注意Vite 不会热加载环境变量修改.env后需要重启 dev server 才会生效。3.3 前端包管理说明后端使用 pnpm、前端使用 npm见 MemoryPanel/README.md 与 package.json两个目录的依赖互相独立务必在对应目录下分别安装不要混用包管理器。四、开发代理双链路请求转发vite.config.ts是前端开发期的路由器。对照源码 vite.config.ts默认代理配置如下请求前缀默认目标环境变量说明/api/v1、/healthhttp://127.0.0.1:8123VITE_TMC_BACKEND_URL链路 AControl 后端Meta / Skill / Chat Memory / Knowledge / Agent 等公开 API/v3http://127.0.0.1:8420VITE_SKILL_GATEWAY_URL记忆网关/v3/skill/*等数据面接口从源码可以看到两个关键实现细节host: 0.0.0.0开发服务器对所有网卡开放方便容器或局域网内其他设备访问而 Control 后端默认只监听 127.0.0.1changeOrigin: true代理时会改写请求头中的 Host 为后端目标避免后端因 Host 校验而拒绝请求。如需连接其他开发环境请在未提交的web/.env中写入实际地址通过VITE_TMC_BACKEND_URL/VITE_SKILL_GATEWAY_URL覆盖默认目标不要把内部地址、账号或凭证写入 README、源码或已跟踪的环境文件。五、生产构建与产物托管npm run buildbuild脚本实际执行tsc vite build见 package.json即先做 TypeScript 类型检查、再执行 Vite 构建任何类型错误都会直接中断构建。产物输出到web/dist/源码中outDir: dist且emptyOutDir: true。Control 支持通过UI_DIST_DIR./web/dist配置项同源托管这些静态文件——即由 Control 服务直接对外提供页面与 API前端无需单独部署 Nginx 或静态服务器。结合前面提到的 HashRouter这种静态托管不需要任何 SPA fallback 规则即可支持页面刷新与深链直达。构建完成后可用npm run preview本地预览产物效果。六、API 边界前端对接的公开契约6.1 前端使用的 Control API前端仅对接以下 Control 公开 API 前缀同时登记在 MemoryPanel/README.md 中/api/v1/meta/*实例、身份与元数据管理/api/v1/skill/*Skill 管理/api/v1/chat-memory/*Chat Memory 管理/api/v1/knowledge/*Wiki 与 Code Graph 管理/api/v1/agent-overview/*Agent 资产聚合/api/v1/agent/*Agent 生命周期操作对接边界以仓库 docs/api 下的公开契约为准如 meta-api.openapi.yaml未列入公开契约的外部服务接口不属于前端对接范围前端也不得直接调用。6.2 无 Cookie 鉴权模型Header 注入README 强调登录凭证保存在浏览器localStorage业务请求通过X-Tdai-Service-Id和X-Tdai-User-KeyHeader 发送。源码给出了完整的实现证据链会话缓存panelSession.ts登录凭证instanceIduserKey 可选的user以 JSON 形式缓存在localStorage的tdai-panel.session键下。源码注释说明早期版本曾用sessionStoragetab 级新开 tab 需重新登录改为localStorage后多 tab 共享登录态登出时通过 storage 事件同步请求注入base.tsmetaPost每次请求自动从会话中读取凭证并注入两个 Header——X-Tdai-Service-Id实例 ID即注册表 id 内核x-tdai-service-id与X-Tdai-User-Key用户 API Key⚠️ Header 名以meta-api.openapi.yamlv1.1.0 为准早期文档使用的X-Metadata-Instance-Id已改名若仍按旧名发送Control 会返回400 MISSING_INSTANCE_ID登录验活auth.ts登录流程为 ①GET /meta/instances选择实例 → ② 用户输入自持的user_keysk-mem-…格式→ ③POST /meta/auth/verify此时 Header 仅带X-Tdai-Service-Iduser_key只放 body→ ④ 返回valid true后把凭证写入会话401 全局处理请求层在收到 401 时会派发auth:unauthorized自定义事件App 层监听后清空 auth 状态并展示登录页Meta 信封解析所有 Meta 接口返回统一信封code ! 0或data为空时按错误处理并优先从信封中提取message/request_id构造可读错误信息error-message.ts 负责最终格式化。安全底线前端不得记录、展示或上传完整凭证。user_key是用户凭证只能通过请求 Header 传递实例注册表中的api_key仅供服务端调用外部服务绝不返回浏览器。七、常用命令速查命令说明npm run dev启动 Vite 开发服务器默认端口 5173npm run mock以 mock 入口启动VITE_ENTRYmock vitenpm run buildTypeScript 类型检查并构建到web/dist/npm run preview本地预览构建产物npm run lint:checkESLint 检查src/**/*.{ts,tsx}lint带--fix自动修复npm run format:checkPrettier 格式检查src/**/*.{ts,tsx,css}format自动格式化八、安全与提交规范综合前端 README 与 MemoryPanel/README.md 的安全要求前端开发与提交需遵守.env、真实实例注册表、日志和测试报告不得提交到版本库文档与示例只能使用example.com、回环地址及明显占位符禁止出现内部地址、账号或凭证提交前建议运行bash scripts/secret-scan.sh --strict扫描敏感信息脚本位于 MemoryPanel/scripts/secret-scan.sh若凭证曾进入 Git 历史应立即轮换凭证并在发布前清理历史记录。九、小结MemoryPanel/web是一个典型的无状态后端 纯前端凭证持有管理控制台实现本地开发依赖 Vite 代理把/api/v1与/v3双链路分别转发给 Control 与记忆网关生产构建产物可直接交给 Control 同源托管鉴权完全基于localStorage会话与X-Tdai-Service-Id/X-Tdai-User-KeyHeader 注入无 Cookie、无服务端会话。理解这套启动流程、代理边界与凭证模型是继续深入阅读前端各业务页面pages、API 分域封装lib/api以及 Meta OpenAPI 契约 的前提。【免费下载链接】TencentDB-Agent-MemoryTencentDB Agent Memory is a team-level memory hub for AI Agents — turning conversations, docs, and code into four reusable memory assets (Chat Memory, Skill, LLM-Wiki, Code-Graph) that are governed, shared, and equipped across agents and frameworks.项目地址: https://gitcode.com/GitHub_Trending/te/TencentDB-Agent-Memory创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考