diff --git a/.gitignore b/.gitignore
index 49c12e2..6e584f0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -122,3 +122,4 @@ dist
 *package-lock.json
 *log/
 code/web/client/assets/color.less
+code/web/client/assets/color.less
diff --git a/code/web/client/assets/color.less b/code/web/client/assets/color.less
index a440d82..7d440a3 100644
--- a/code/web/client/assets/color.less
+++ b/code/web/client/assets/color.less
@@ -1147,10 +1147,10 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 .ant-mentions-dropdown-menu-item-active {background-color: @item-hover-bg;}
 .ant-menu-item-danger.ant-menu-item {color: #ff4d4f;}
 .ant-menu-item-danger.ant-menu-item:hover, .ant-menu-item-danger.ant-menu-item-active {color: #ff4d4f;}
-.ant-menu-item-danger.ant-menu-item:active {background: color(~`colorPalette("@{slider-rail-background-color}", 1)`);}
+.ant-menu-item-danger.ant-menu-item:active {background: #fff1f0;}
 .ant-menu-item-danger.ant-menu-item-selected {color: #ff4d4f;}
 .ant-menu-item-danger.ant-menu-item-selected > a, .ant-menu-item-danger.ant-menu-item-selected > a:hover {color: #ff4d4f;}
-.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-danger.ant-menu-item-selected {background-color: color(~`colorPalette("@{slider-rail-background-color}", 1)`);}
+.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-danger.ant-menu-item-selected {background-color: #fff1f0;}
 .ant-menu-inline .ant-menu-item-danger.ant-menu-item::after {border-right-color: #ff4d4f;}
 .ant-menu-dark .ant-menu-item-danger.ant-menu-item, .ant-menu-dark .ant-menu-item-danger.ant-menu-item:hover, .ant-menu-dark .ant-menu-item-danger.ant-menu-item > a {color: #ff4d4f;}
 .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-danger.ant-menu-item-selected {color: #fff;background-color: #ff4d4f;}
@@ -1727,11 +1727,11 @@ tr.ant-table-expanded-row:hover > td {background: @table-expanded-row-bg;}
 .ant-tag-checkable:active, .ant-tag-checkable-checked {color: #fff;}
 .ant-tag-checkable-checked {background-color: @primary-color;}
 .ant-tag-checkable:active {background-color: color(~`colorPalette("@{primary-color}", 7)`);}
-.ant-tag-pink {color: #c41d7f;background: #fff0f6;border-color: color(~`colorPalette("@{input-placeholder-color}", 2)`);}
+.ant-tag-pink {color: #c41d7f;background: #fff0f6;border-color: #ffadd2;}
 .ant-tag-pink-inverse {color: #fff;background: #eb2f96;border-color: #eb2f96;}
-.ant-tag-magenta {color: #c41d7f;background: #fff0f6;border-color: color(~`colorPalette("@{input-placeholder-color}", 2)`);}
+.ant-tag-magenta {color: #c41d7f;background: #fff0f6;border-color: #ffadd2;}
 .ant-tag-magenta-inverse {color: #fff;background: #eb2f96;border-color: #eb2f96;}
-.ant-tag-red {color: #cf1322;background: color(~`colorPalette("@{slider-rail-background-color}", 1)`);border-color: #ffa39e;}
+.ant-tag-red {color: #cf1322;background: #fff1f0;border-color: #ffa39e;}
 .ant-tag-red-inverse {color: #fff;background: #f5222d;border-color: #f5222d;}
 .ant-tag-volcano {color: #d4380d;background: #fff2e8;border-color: #ffbb96;}
 .ant-tag-volcano-inverse {color: #fff;background: #fa541c;border-color: #fa541c;}
@@ -1741,17 +1741,17 @@ tr.ant-table-expanded-row:hover > td {background: @table-expanded-row-bg;}
 .ant-tag-yellow-inverse {color: #fff;background: #fadb14;border-color: #fadb14;}
 .ant-tag-gold {color: #d48806;background: #fffbe6;border-color: #ffe58f;}
 .ant-tag-gold-inverse {color: #fff;background: #faad14;border-color: #faad14;}
-.ant-tag-cyan {color: #08979c;background: color(~`colorPalette("@{info-color-deprecated-border}", 1)`);border-color: #87e8de;}
+.ant-tag-cyan {color: #08979c;background: #e6fffb;border-color: #87e8de;}
 .ant-tag-cyan-inverse {color: #fff;background: #13c2c2;border-color: #13c2c2;}
-.ant-tag-lime {color: #7cb305;background: color(~`colorPalette("@{calendar-bg}", 1)`);border-color: #eaff8f;}
+.ant-tag-lime {color: #7cb305;background: #fcffe6;border-color: #eaff8f;}
 .ant-tag-lime-inverse {color: #fff;background: #a0d911;border-color: #a0d911;}
 .ant-tag-green {color: #389e0d;background: #f6ffed;border-color: #b7eb8f;}
 .ant-tag-green-inverse {color: #fff;background: #52c41a;border-color: #52c41a;}
 .ant-tag-blue {color: #096dd9;background: #e6f7ff;border-color: #91d5ff;}
 .ant-tag-blue-inverse {color: #fff;background: #1890ff;border-color: #1890ff;}
-.ant-tag-geekblue {color: #1d39c4;background: #f0f5ff;border-color: #adc6ff;}
+.ant-tag-geekblue {color: #1d39c4;background: color(~`colorPalette("@{progress-steps-item-bg}", 2)`);border-color: #adc6ff;}
 .ant-tag-geekblue-inverse {color: #fff;background: #2f54eb;border-color: #2f54eb;}
-.ant-tag-purple {color: #531dab;background: color(~`colorPalette("@{comment-author-time-color}", 1)`);border-color: #d3adf7;}
+.ant-tag-purple {color: #531dab;background: color(~`colorPalette("@{table-header-sort-active-bg}", 1)`);border-color: #d3adf7;}
 .ant-tag-purple-inverse {color: #fff;background: #722ed1;border-color: #722ed1;}
 .ant-tag-success {color: #52c41a;background: @success-color-deprecated-bg;border-color: @success-color-deprecated-border;}
 .ant-tag-processing {color: @primary-color;background: @info-color-deprecated-bg;border-color: @info-color-deprecated-border;}
diff --git a/code/web/client/src/sections/meta/containers/ProtocolInfo.js b/code/web/client/src/sections/meta/containers/ProtocolInfo.js
new file mode 100644
index 0000000..3aa1c0a
--- /dev/null
+++ b/code/web/client/src/sections/meta/containers/ProtocolInfo.js
@@ -0,0 +1,89 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { Button, Empty, Space, Spin, Tag, Descriptions } from 'antd';
+import '../style.less';
+import { ProTable } from '@ant-design/pro-table';
+import { render } from 'react-dom';
+import { Link } from 'react-router-dom';
+
+const ProtocolInfo = (props) => {
+    const { dispatch, actions, productId, product, products, loading } = props
+
+    const { meta } = actions;
+
+    useEffect(() => {
+        if (!!productId) {
+            dispatch(meta.getProduct(productId))
+        }
+    }, []);
+
+    const columns = [{
+        title: '能力',
+        dataIndex: 'cmname'
+    }, {
+        title: '描述',
+        dataIndex: 'cmdesc'
+    }, {
+        title: '接口',
+        dataIndex: 'iname'
+    }, {
+        title: '协议名',
+        dataIndex: 'pmdesc'
+    }, {
+        title: '协议',
+        dataIndex: 'pmname',
+        render: (_, item) => {
+            return <a href={`protocol/${item.pmname}`}>{item.pmname}</a>;
+        },
+    },
+    ]
+
+    const actionRef = useRef();
+    return (
+        <Spin spinning={loading}>
+            <Descriptions title="Product Info" bordered>
+                <Descriptions.Item label="ID" span={3} >{product?.Id}</Descriptions.Item>
+                <Descriptions.Item label="名称" span={2}>{product?.Name}</Descriptions.Item>
+                <Descriptions.Item label="型号" span={1}>{product?.Model}</Descriptions.Item>
+                <Descriptions.Item label="描述" span={3}>{product?.Desc}</Descriptions.Item>
+                <Descriptions.Item label="更新时间" span={3}>{product?.UpdatedAt}</Descriptions.Item>
+                <Descriptions.Item label="创建时间" span={3}>{product?.CreatedAt}</Descriptions.Item>
+                <Descriptions.Item label="所属公司" >{product?.Company}</Descriptions.Item>
+                <Descriptions.Item label="创建用户" >{product?.Username}</Descriptions.Item>
+                <Descriptions.Item label="资源类型" span={3}>{product?.FilterResource}</Descriptions.Item>
+            </Descriptions>
+            <h3>能力集合</h3>
+            <ProTable
+                columns={columns}
+                actionRef={actionRef}
+                dataSource={products}
+                options={false}
+                toolBarRender={false}
+                search={false}
+
+            >
+            </ProTable>
+        </Spin>
+    )
+}
+
+function mapStateToProps(state) {
+    const { auth, global, product } = state;
+    console.log(product)
+    let raw = product
+    let p = {}
+    if (product && product.data && (product.data.data ?? []).length > 0) {
+        p = product.data.data[0];
+    }
+    console.log(raw.data?.data ?? [])
+
+    return {
+        user: auth.user,
+        actions: global.actions,
+        loading: product.isRequesting,
+        product: p,
+        products: raw.data?.data ?? [],
+    };
+}
+
+export default connect(mapStateToProps)(ProtocolInfo);
\ No newline at end of file