diff --git a/src/components/BootstrapBlazor.HikVision/Component1.razor b/src/components/BootstrapBlazor.HikVision/Component1.razor
deleted file mode 100644
index 70c378b8..00000000
--- a/src/components/BootstrapBlazor.HikVision/Component1.razor
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="my-component">
-    This component is defined in the <strong>BootstrapBlazor.HikVision</strong> library.
-</div>
diff --git a/src/components/BootstrapBlazor.HikVision/Component1.razor.css b/src/components/BootstrapBlazor.HikVision/Component1.razor.css
deleted file mode 100644
index c6afca40..00000000
--- a/src/components/BootstrapBlazor.HikVision/Component1.razor.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.my-component {
-    border: 2px dashed red;
-    padding: 1em;
-    margin: 1em 0;
-    background-image: url('background.png');
-}
diff --git a/src/components/BootstrapBlazor.HikVision/Components/HikVision.razor b/src/components/BootstrapBlazor.HikVision/Components/HikVision.razor
index 8645aab8..e4b02995 100644
--- a/src/components/BootstrapBlazor.HikVision/Components/HikVision.razor
+++ b/src/components/BootstrapBlazor.HikVision/Components/HikVision.razor
@@ -1,20 +1,5 @@
 @namespace BootstrapBlazor.Components
 @inherits BootstrapModuleComponentBase
 
-<div @attributes="AdditionalAttributes" class="@ClassString" id="@Id">
-    <div id="@PreviewId" class="bb-hik-preview" style="width: 500px; height: 300px;"></div>
-    <div class="bb-hik-controls">
-        <button class="btn btn-primary bb-hik-login">
-            <span>登录</span>
-        </button>
-        <button class="btn btn-primary bb-hik-logout">
-            <span>退出</span>
-        </button>
-        <button class="btn btn-primary bb-hik-start">
-            <span>开始预览</span>
-        </button>
-        <button class="btn btn-primary bb-hik-stop">
-            <span>停止预览</span>
-        </button>
-    </div>
+<div @attributes="AdditionalAttributes" class="@ClassString" id="@Id" style="@StyleString">
 </div> 
diff --git a/src/components/BootstrapBlazor.HikVision/Components/HikVision.razor.cs b/src/components/BootstrapBlazor.HikVision/Components/HikVision.razor.cs
index 91d75cb0..bd19718f 100644
--- a/src/components/BootstrapBlazor.HikVision/Components/HikVision.razor.cs
+++ b/src/components/BootstrapBlazor.HikVision/Components/HikVision.razor.cs
@@ -2,6 +2,8 @@
 // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 // Website: https://www.blazor.zone or https://argozhang.github.io/
 
+using Microsoft.AspNetCore.Components;
+
 namespace BootstrapBlazor.Components;
 
 /// <summary>
@@ -10,9 +12,89 @@ namespace BootstrapBlazor.Components;
 [JSModuleAutoLoader("./_content/BootstrapBlazor.HikVision/Components/HikVision.razor.js")]
 public partial class HikVision
 {
-    private string PreviewId => $"{Id}_preview";
+    /// <summary>
+    /// 获得/设置 网络摄像机 IP 地址
+    /// </summary>
+    [Parameter]
+    public string? Ip { get; set; }
+
+    /// <summary>
+    /// 获得/设置 网络摄像机 端口号 默认值 80
+    /// </summary>
+    [Parameter]
+    public int Port { get; set; } = 80;
+
+    /// <summary>
+    /// 获得/设置 网络摄像机 登录用户名
+    /// </summary>
+    [Parameter]
+    public string? UserName { get; set; }
+
+    /// <summary>
+    /// 获得/设置 网络摄像机 登录密码
+    /// </summary>
+    [Parameter]
+    public string? Password { get; set; }
+
+    /// <summary>
+    /// 获得/设置 网络摄像机 登录类型 默认值 <see cref="LoginType.Http"/>
+    /// </summary>
+    [Parameter]
+    public LoginType LoginType { get; set; }
+
+    /// <summary>
+    /// 获得/设置 视频图像窗口宽度 默认值 500px
+    /// </summary>
+    [Parameter]
+    public string? Width { get; set; }
+
+    /// <summary>
+    /// 获得/设置 视频图像窗口高度 默认值 300px
+    /// </summary>
+    [Parameter]
+    public string? Height { get; set; }
 
     private string? ClassString => CssBuilder.Default("bb-hik")
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
+
+    private string? StyleString => CssBuilder.Default()
+        .AddClass($"width: {Width};", !string.IsNullOrEmpty(Width))
+        .AddClass($"height: {Height};", !string.IsNullOrEmpty(Height))
+        .AddStyleFromAttributes(AdditionalAttributes)
+        .Build();
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+
+        Width ??= "500px";
+        Height ??= "300px";
+    }
+
+    /// <summary>
+    /// 登录方法
+    /// </summary>
+    /// <param name="ip"></param>
+    /// <param name="port"></param>
+    /// <param name="userName"></param>
+    /// <param name="password"></param>
+    /// <param name="loginType"></param>
+    /// <returns></returns>
+    public async Task Login(string ip, string port, string userName, string password, LoginType loginType = LoginType.Http)
+    {
+        await InvokeVoidAsync("login", Id, ip, port, userName, password, (int)loginType);
+    }
+
+    /// <summary>
+    /// 登出方法
+    /// </summary>
+    /// <returns></returns>
+    public async Task Logout()
+    {
+        await InvokeVoidAsync("logout", Id);
+    }
 }
diff --git a/src/components/BootstrapBlazor.HikVision/Components/HikVision.razor.js b/src/components/BootstrapBlazor.HikVision/Components/HikVision.razor.js
index 3d38ef1d..198f5c39 100644
--- a/src/components/BootstrapBlazor.HikVision/Components/HikVision.razor.js
+++ b/src/components/BootstrapBlazor.HikVision/Components/HikVision.razor.js
@@ -7,39 +7,11 @@ export async function init(id) {
         return;
     }
 
-    const previewId = `${id}_preview`;
-    await initVision(previewId);
-
-    const controls = el.querySelector('.bb-hik-controls');
-    if (controls) {
-        EventHandler.on(controls, 'click', '.bb-hik-login', async e => {
-            console.log('login');
-            await login(previewId, '47.121.113.151', 9980, 'admin', 'vhbn8888', 1)
-        });
-        EventHandler.on(controls, 'click', '.bb-hik-logout', e => {
-            console.log('logout');
-            logout(previewId);
-        });
-        EventHandler.on(controls, 'click', '.bb-hik-start', e => {
-            console.log('start');
-            startRealPlay(previewId);
-        });
-        EventHandler.on(controls, 'click', '.bb-hik-stop', e => {
-            console.log('stop');
-            stopRealPlay(previewId);
-        });
-    }
+    await initVision(id);
 }
 
-export function dispose(id) {
-    const el = document.getElementById(id);
-    if (el !== null) {
-        const controls = el.querySelector('.bb-hik-controls');
-        if (controls) {
-            EventHandler.off(controls, 'click');
-        }
-    }
+export { login, logout, startRealPlay, stopRealPlay }
 
-    const previewId = `${id}_preview`;
-    disposeVision(previewId);
+export function dispose(id) {
+    disposeVision(id);
 }