diff --git a/README.md b/README.md
index fb8deb0..df7bf56 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,5 @@
 # directory-external-item
 
-目录面板详细信息编辑拓展额外项
\ No newline at end of file
+目录面板详细信息编辑拓展额外项
+
+![](./screenshots/demo.gif)
diff --git a/screenshots/demo.gif b/screenshots/demo.gif
new file mode 100644
index 0000000..bd814ee
Binary files /dev/null and b/screenshots/demo.gif differ
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..f297c08
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,11 @@
+!(function() {
+  BI.config("dec.provider.directory", function(provider) {
+    provider.inject({
+      externalDetailItems: [
+        {
+          type: "dec.demo"
+        }
+      ]
+    });
+  });
+})();
diff --git a/src/model.js b/src/model.js
new file mode 100644
index 0000000..e90fc04
--- /dev/null
+++ b/src/model.js
@@ -0,0 +1,29 @@
+!(function() {
+  var Store = BI.inherit(Fix.Model, {
+    state: function() {
+      return {
+        carrierInfo: {
+          carrierType: "depost",
+          pending: false
+        },
+        entityInfo: {
+          entityType: "entry",
+          entityId: null,
+          privilegeDetailBeanList: null
+        }
+      };
+    },
+
+    childContext: ["carrierInfo", "entityInfo"],
+
+    actions: {
+      changeEntityInfo: function(cardInfo) {
+        this.model.entityInfo = BI.extend({}, this.model.entityInfo, {
+          entityId: cardInfo.id
+        });
+      }
+    }
+  });
+
+  BI.model("dec.model.demo", Store);
+})();
diff --git a/src/view.js b/src/view.js
new file mode 100644
index 0000000..9a9c05a
--- /dev/null
+++ b/src/view.js
@@ -0,0 +1,44 @@
+!(function() {
+  var Demo = BI.inherit(BI.Widget, {
+    props: {
+      height: 600
+    },
+
+    _store: function() {
+      return BI.Models.getModel("dec.model.demo");
+    },
+
+    render: function() {
+      return {
+        type: "bi.vtape",
+        items: [
+          {
+            el: {
+              type: "bi.label",
+              textAlign: "left",
+              hgap: 10,
+              text: "权限详情"
+            },
+            height: 30
+          },
+          {
+            el: {
+              type: "dec.authority.quick.config.pane"
+            }
+          }
+        ]
+      };
+    },
+
+    getValue: function() {
+      //  额外组件如果无需返回值,返回空对象
+      return {};
+    },
+
+    populate: function(cardInfo) {
+      this.store.changeEntityInfo(cardInfo);
+    }
+  });
+
+  BI.shortcut("dec.demo", Demo);
+})();