diff --git a/plugins/plugin.pro b/plugins/plugin.pro
index cee11d57..1ef03f43 100644
--- a/plugins/plugin.pro
+++ b/plugins/plugin.pro
@@ -3,4 +3,5 @@ SUBDIRS = \
     netconnect \
     wlanconnect \
     mobilehotspot \
-    proxy
+    proxy \
+    vpn
diff --git a/plugins/vpn/itemframe.cpp b/plugins/vpn/itemframe.cpp
new file mode 100644
index 00000000..61fc23d1
--- /dev/null
+++ b/plugins/vpn/itemframe.cpp
@@ -0,0 +1,62 @@
+/* -*- Mode: C; tab-width: 4; indent-tabs-mode: nil; c-basic-offset: 4 -*-
+ *
+ * Copyright (C) 2022 Tianjin KYLIN Information Technology Co., Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301, USA.
+ *
+ */
+#include "itemframe.h"
+#include <QPainter>
+
+#define LAYOUT_MARGINS 0,0,0,0
+#define MAIN_LAYOUT_MARGINS 0,0,0,0
+ItemFrame::ItemFrame(QWidget *parent)
+    :QFrame(parent)
+{
+    deviceLanLayout = new QVBoxLayout(this);
+    deviceLanLayout->setContentsMargins(MAIN_LAYOUT_MARGINS);
+    lanItemFrame = new QFrame(this);
+    lanItemFrame->setFrameShape(QFrame::Shape::NoFrame);
+    lanItemFrame->setContentsMargins(LAYOUT_MARGINS);
+
+    lanItemLayout = new QVBoxLayout(this);
+    lanItemLayout->setContentsMargins(LAYOUT_MARGINS);
+    lanItemLayout->setSpacing(1);
+    addWlanWidget = new AddNetBtn(true, this);
+
+    deviceLanLayout->setSpacing(1);
+    setLayout(deviceLanLayout);
+    lanItemFrame->setLayout(lanItemLayout);
+
+    deviceLanLayout->addWidget(lanItemFrame);
+    deviceLanLayout->addWidget(addWlanWidget);
+}
+
+void ItemFrame::filletStyleChange()
+{
+    if (lanItemLayout->isEmpty()) {
+        return;
+    }
+
+    for (int i = 0; i < lanItemLayout->count(); ++i) {
+        QLayoutItem *it = lanItemLayout->itemAt(i);
+        VpnItem *itemFrame = (VpnItem*)(it->widget());
+        if (i != lanItemLayout->count()-1) {
+            itemFrame->setHalfFillet(false);
+        } else {
+            itemFrame->setHalfFillet(true);
+        }
+    }
+}
diff --git a/plugins/vpn/itemframe.h b/plugins/vpn/itemframe.h
new file mode 100644
index 00000000..b41153fa
--- /dev/null
+++ b/plugins/vpn/itemframe.h
@@ -0,0 +1,47 @@
+/* -*- Mode: C; tab-width: 4; indent-tabs-mode: nil; c-basic-offset: 4 -*-
+ *
+ * Copyright (C) 2022 Tianjin KYLIN Information Technology Co., Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301, USA.
+ *
+ */
+#ifndef ITEMFRAME_H
+#define ITEMFRAME_H
+#include <QFrame>
+#include <QVBoxLayout>
+#include "../component/AddBtn/addnetbtn.h"
+#include "vpnitem.h"
+
+class ItemFrame : public QFrame
+{
+    Q_OBJECT
+public:
+    ItemFrame(QWidget *parent = nullptr);
+    //单设备整体layout
+    QVBoxLayout * deviceLanLayout = nullptr;
+    //单设备列表Frame
+    QFrame * lanItemFrame = nullptr;
+    //单设备列表layout
+    QVBoxLayout * lanItemLayout = nullptr;
+    //item列表
+    QMap<QString, VpnItem *> itemMap;
+//    //已激活uuid
+//    QString uuid = "";
+    //新建无线连接
+    AddNetBtn * addWlanWidget = nullptr;
+    void filletStyleChange();
+};
+
+#endif // ITEMFRAME_H
diff --git a/plugins/vpn/vpn.cpp b/plugins/vpn/vpn.cpp
new file mode 100644
index 00000000..27702e51
--- /dev/null
+++ b/plugins/vpn/vpn.cpp
@@ -0,0 +1,248 @@
+/* -*- Mode: C; tab-width: 4; indent-tabs-mode: nil; c-basic-offset: 4 -*-
+ *
+ * Copyright (C) 2019 Tianjin KYLIN Information Technology Co., Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301, USA.
+ *
+ */
+#include "vpn.h"
+#include "ui_vpn.h"
+
+#include <QProcess>
+#include <QMouseEvent>
+#include <QDebug>
+
+#define LABEL_RECT 17, 0, 105, 23
+#define CONTENTS_MARGINS 0, 0, 0, 0
+#define ITEM_MARGINS 16, 0, 16, 0
+#define FRAME_MIN_SIZE 550, 60
+#define FRAME_MAX_SIZE 16777215, 16777215
+#define CONTECT_FRAME_MAX_SIZE 16777215, 60
+#define HINT_TEXT_MARGINS 8, 0, 0, 0
+#define FRAME_MIN_SIZE 550, 60
+#define LABLE_MIN_WIDTH 188
+#define COMBOBOX_MIN_WIDTH 200
+#define LINE_MAX_SIZE 16777215, 1
+#define LINE_MIN_SIZE 0, 1
+#define ICON_SIZE   24,24
+#define PASSWORD_FRAME_MIN_HIGHT 60
+#define PASSWORD_FRAME_FIX_HIGHT 80
+#define PASSWORD_FRAME_MIN_SIZE 550, 60
+#define PASSWORD_FRAME_MAX_SIZE 16777215, 86
+#define PASSWORD_ITEM_MARGINS 16, 12, 16, 14
+
+#define KVpnSymbolic "ukui-vpn-symbolic"
+
+Vpn::Vpn() : mFirstLoad(true)
+{
+    pluginName = tr("Vpn");
+    pluginType = NETWORK;
+}
+
+Vpn::~Vpn()
+{
+    if (!mFirstLoad) {
+        delete ui;
+        ui = nullptr;
+    }
+}
+
+QString Vpn::plugini18nName(){
+    return pluginName;
+}
+
+int Vpn::pluginTypes(){
+    return pluginType;
+}
+
+QWidget *Vpn::pluginUi(){
+    if (mFirstLoad) {
+        mFirstLoad = false;
+        ui = new Ui::Vpn;
+        pluginWidget = new QWidget;
+        pluginWidget->setAttribute(Qt::WA_DeleteOnClose);
+        ui->setupUi(pluginWidget);
+
+        initComponent();
+    }
+    return pluginWidget;
+}
+
+const QString Vpn::name() const {
+
+    return QStringLiteral("Vpn");
+}
+
+bool Vpn::isShowOnHomePage() const
+{
+    return true;
+}
+
+QIcon Vpn::icon() const
+{
+    return QIcon::fromTheme("ukui-vpn-symbolic");
+}
+
+bool Vpn::isEnable() const
+{
+    return true;
+}
+
+void Vpn::initComponent(){
+    //在任务栏上显示图标
+    //显示已连接时间
+    m_topFrame = new QFrame(pluginWidget);
+    m_topFrame->setMinimumSize(FRAME_MIN_SIZE);
+    m_topFrame->setMaximumSize(FRAME_MAX_SIZE);
+    m_topFrame->setFrameShape(QFrame::Box);
+
+    QVBoxLayout *hotspotLyt = new QVBoxLayout(pluginWidget);
+    hotspotLyt->setContentsMargins(0, 0, 0, 0);
+    m_topFrame->setLayout(hotspotLyt);
+
+    m_showFrame = new QFrame(m_topFrame);
+    m_showFrame->setFrameShape(QFrame::Shape::NoFrame);
+    m_showFrame->setMinimumSize(FRAME_MIN_SIZE);
+    m_showFrame->setMaximumSize(CONTECT_FRAME_MAX_SIZE);
+    QHBoxLayout *showLayout = new QHBoxLayout(m_showFrame);
+    m_showLabel = new QLabel(tr("Open"), m_showFrame);
+    m_showLabel->setMinimumWidth(LABLE_MIN_WIDTH);
+    m_showBtn = new KSwitchButton(m_showFrame);
+    showLayout->setContentsMargins(ITEM_MARGINS);
+    showLayout->addWidget(m_showLabel);
+    showLayout->addStretch();
+    showLayout->addWidget(m_showBtn);
+
+    m_showFrame->setLayout(showLayout);
+
+    m_Line = myLine();
+
+    m_timeFrame = new QFrame(m_topFrame);
+    m_timeFrame->setFrameShape(QFrame::Shape::NoFrame);
+    m_timeFrame->setMinimumSize(FRAME_MIN_SIZE);
+    m_timeFrame->setMaximumSize(CONTECT_FRAME_MAX_SIZE);
+    QHBoxLayout *timeLayout = new QHBoxLayout(m_timeFrame);
+    m_timeLabel = new QLabel(tr("Open"), m_timeFrame);
+    m_timeLabel->setMinimumWidth(LABLE_MIN_WIDTH);
+    m_timeBtn = new KSwitchButton(m_timeFrame);
+    timeLayout->setContentsMargins(ITEM_MARGINS);
+    timeLayout->addWidget(m_timeLabel);
+    timeLayout->addStretch();
+    timeLayout->addWidget(m_timeBtn);
+
+    m_timeFrame->setLayout(timeLayout);
+
+    hotspotLyt->addWidget(m_showFrame);
+    hotspotLyt->addWidget(m_Line);
+    hotspotLyt->addWidget(m_timeFrame);
+    hotspotLyt->setSpacing(0);
+
+    //列表
+    m_listFrame = new ItemFrame(pluginWidget);
+
+    ui->verticalLayout_4->addWidget(m_topFrame);
+    ui->verticalLayout_3->addWidget(m_listFrame);
+
+    connect(m_listFrame->addWlanWidget, &AddNetBtn::clicked, this, [=]() {
+        runExternalApp();
+    });
+}
+
+void Vpn::runExternalApp(){
+    QString cmd = "nm-connection-editor";
+    QProcess process(this);
+    process.startDetached(cmd);
+}
+
+QFrame* Vpn::myLine()
+{
+    QFrame *line = new QFrame(pluginWidget);
+    line->setMinimumSize(QSize(LINE_MIN_SIZE));
+    line->setMaximumSize(QSize(LINE_MAX_SIZE));
+    line->setLineWidth(0);
+    line->setFrameShape(QFrame::HLine);
+    line->setFrameShadow(QFrame::Sunken);
+
+    return line;
+}
+
+
+
+
+//增加一项
+void Vpn::addOneVirtualItem(QStringList infoList)
+{
+    if (m_listFrame->itemMap.contains(infoList.at(1))) {
+        qDebug() << "[Vpn]Already exist a virtual " << infoList.at(1);
+        return;
+    }
+
+    qDebug() << "[Vpn]addOneVitualItem" << infoList.at(0);
+    QString connName = infoList.at(0);
+    QString connUuid = infoList.at(1);
+    QString connDbusPath = infoList.at(2);
+    VpnItem * lanItem = new VpnItem(pluginWidget);
+
+    QString iconPath;
+    iconPath = KVpnSymbolic;
+    lanItem->statusLabel->setText("");
+
+    QIcon searchIcon = QIcon::fromTheme(iconPath);
+    lanItem->iconLabel->setPixmap(searchIcon.pixmap(searchIcon.actualSize(QSize(ICON_SIZE))));
+    lanItem->titileLabel->setText(connName);
+
+    lanItem->uuid = connUuid;
+    lanItem->dbusPath = connDbusPath;
+
+//    connect(lanItem->infoLabel, &GrayInfoButton::clicked, this, [=]{
+//        // open landetail page
+//        if (!m_interface->isValid()) {
+//            return;
+//        }
+//        qDebug() << "[NetConnect]call showPropertyWidget" << deviceName << connUuid << __LINE__;
+//        m_interface->call(QStringLiteral("showPropertyWidget"), deviceName, connUuid);
+//        qDebug() << "[NetConnect]call showPropertyWidget respond" << __LINE__;
+//    });
+
+    lanItem->isAcitve = false;
+
+    connect(lanItem, &QPushButton::clicked, this, [=] {
+        if (lanItem->isAcitve || lanItem->loading) {
+            deActiveConnect(lanItem->uuid, deviceName, WIRED_TYPE);
+        } else {
+            activeConnect(lanItem->uuid, deviceName, WIRED_TYPE);
+        }
+    });
+
+    //记录到deviceFrame的itemMap中
+    m_listFrame->itemMap.insert(connUuid, lanItem);
+    int index = getInsertPos(connName);
+    qDebug()<<"[NetConnect]addOneVirtualItem " << connName << " to " << deviceName << " list at pos:" << index;
+    m_listFrame->lanItemLayout->insertWidget(index, lanItem);
+}
+
+void Vpn::removeOneVirtualItem(QString uuid)
+{
+    if (!m_listFrame->itemMap.contains(uuid)) {
+            qDebug() << "[Vpn]not exist a virtual " << uuid;
+            return;
+    }
+
+   qDebug()<<"[Vpn]removeOneVirtualItem " << uuid;
+
+   m_listFrame->lanItemLayout->removeWidget(m_listFrame->itemMap[uuid]);
+   delete m_listFrame->itemMap[uuid];
+   m_listFrame->itemMap.remove(uuid);
+}
diff --git a/plugins/vpn/vpn.h b/plugins/vpn/vpn.h
new file mode 100644
index 00000000..14793f43
--- /dev/null
+++ b/plugins/vpn/vpn.h
@@ -0,0 +1,108 @@
+/* -*- Mode: C; tab-width: 4; indent-tabs-mode: nil; c-basic-offset: 4 -*-
+ *
+ * Copyright (C) 2019 Tianjin KYLIN Information Technology Co., Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301, USA.
+ *
+ */
+#ifndef VPN_H
+#define VPN_H
+
+#include <QObject>
+#include <QtPlugin>
+#include <QtDBus/QDBusInterface>
+#include <QFrame>
+#include <QLabel>
+
+#include "interface.h"
+#include "addbtn.h"
+#include "imageutil.h"
+#include "kwidget.h"
+#include "kswitchbutton.h"
+#include "itemframe.h"
+
+using namespace kdk;
+
+namespace Ui {
+class Vpn;
+}
+
+class Vpn : public QObject, CommonInterface
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID "org.ukcc.CommonInterface")
+    Q_INTERFACES(CommonInterface)
+
+public:
+    Vpn();
+    ~Vpn();
+
+    QString plugini18nName() Q_DECL_OVERRIDE;
+    int pluginTypes() Q_DECL_OVERRIDE;
+    QWidget * pluginUi() Q_DECL_OVERRIDE;
+    const QString name() const  Q_DECL_OVERRIDE;
+    bool isShowOnHomePage() const Q_DECL_OVERRIDE;
+    QIcon icon() const Q_DECL_OVERRIDE;
+    bool isEnable() const Q_DECL_OVERRIDE;
+
+public:
+    void initComponent();
+
+    void runExternalApp();
+
+protected:
+//    bool eventFilter(QObject *watched, QEvent *event);
+
+private:
+    Ui::Vpn *ui;
+
+    QString pluginName;
+    int pluginType;
+    QWidget * pluginWidget;
+
+    QFrame *m_topFrame;
+    QFrame *m_showFrame;
+    QLabel *m_showLabel;
+    KSwitchButton *m_showBtn;
+    QFrame *m_Line;
+    QFrame *m_timeFrame;
+    QLabel *m_timeLabel;
+    KSwitchButton *m_timeBtn;
+    ItemFrame *m_listFrame;
+
+    bool mFirstLoad;
+
+    QFrame* myLine();
+
+    int getInsertPos(QString connName);
+
+    void deleteOneLan(QString uuid);
+    void activeConnect(QString uuid);
+    void deActiveConnect(QString uuid);
+
+    //获取设备列表
+    void initNet();
+    //处理列表增加
+    void addLanItem(QStringList infoList, bool isActived);
+    //增加一项
+    void addOneVirtualItem(QStringList infoList);
+    //减少一项
+    void removeOneVirtualItem(QString uuid);
+    //单个lan连接状态变化
+    void itemActiveConnectionStatusChanged(VpnItem *item, int status);
+
+};
+
+#endif // VPN_H
diff --git a/plugins/vpn/vpn.pro b/plugins/vpn/vpn.pro
new file mode 100644
index 00000000..4884bc97
--- /dev/null
+++ b/plugins/vpn/vpn.pro
@@ -0,0 +1,44 @@
+#-------------------------------------------------
+#
+# Project created by QtCreator 2019-06-29T13:53:10
+#
+#-------------------------------------------------
+
+QT       += widgets dbus
+
+TEMPLATE = lib
+CONFIG += plugin \
+          c++11 \
+          link_pkgconfig
+
+include(../component/addbtn.pri)
+
+PKGCONFIG   += gsettings-qt \
+             kysdk-qtwidgets \
+
+TARGET = $$qtLibraryTarget(vpn)
+DESTDIR = ../..
+target.path = $$[QT_INSTALL_LIBS]/ukui-control-center
+
+INCLUDEPATH   +=  \
+                 $$PROJECT_COMPONENTSOURCE \
+                 $$PROJECT_ROOTDIR \
+                 /usr/include/ukcc/interface \
+                 /usr/include/ukcc/widgets
+
+LIBS += -L$$[QT_INSTALL_LIBS] -lukcc
+
+SOURCES += \
+    vpn.cpp \
+    itemframe.cpp \
+    vpnitem.cpp
+
+HEADERS += \
+    vpn.h \
+    itemframe.h \
+    vpnitem.h
+
+FORMS += \
+    vpn.ui
+
+INSTALLS += target
diff --git a/plugins/vpn/vpn.ui b/plugins/vpn/vpn.ui
new file mode 100644
index 00000000..bd1de4af
--- /dev/null
+++ b/plugins/vpn/vpn.ui
@@ -0,0 +1,112 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ui version="4.0">
+ <class>Vpn</class>
+ <widget class="QWidget" name="Vpn">
+  <property name="geometry">
+   <rect>
+    <x>0</x>
+    <y>0</y>
+    <width>800</width>
+    <height>710</height>
+   </rect>
+  </property>
+  <property name="minimumSize">
+   <size>
+    <width>0</width>
+    <height>0</height>
+   </size>
+  </property>
+  <property name="maximumSize">
+   <size>
+    <width>16777215</width>
+    <height>16777215</height>
+   </size>
+  </property>
+  <property name="windowTitle">
+   <string notr="true">Vpn</string>
+  </property>
+  <layout class="QVBoxLayout" name="verticalLayout_2">
+   <property name="spacing">
+    <number>8</number>
+   </property>
+   <property name="leftMargin">
+    <number>0</number>
+   </property>
+   <property name="topMargin">
+    <number>0</number>
+   </property>
+   <property name="rightMargin">
+    <number>0</number>
+   </property>
+   <property name="bottomMargin">
+    <number>0</number>
+   </property>
+   <item>
+    <widget class="TitleLabel" name="titleLabel">
+     <property name="sizePolicy">
+      <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+       <horstretch>0</horstretch>
+       <verstretch>0</verstretch>
+      </sizepolicy>
+     </property>
+     <property name="text">
+      <string>VPN</string>
+     </property>
+    </widget>
+   </item>
+   <item>
+    <layout class="QVBoxLayout" name="verticalLayout_4"/>
+   </item>
+   <item>
+    <layout class="QVBoxLayout" name="verticalLayout_3"/>
+   </item>
+   <item>
+    <layout class="QHBoxLayout" name="horizontalLayout">
+     <item>
+      <widget class="QPushButton" name="pushButton">
+       <property name="text">
+        <string>import</string>
+       </property>
+      </widget>
+     </item>
+     <item>
+      <spacer name="horizontalSpacer">
+       <property name="orientation">
+        <enum>Qt::Horizontal</enum>
+       </property>
+       <property name="sizeHint" stdset="0">
+        <size>
+         <width>40</width>
+         <height>20</height>
+        </size>
+       </property>
+      </spacer>
+     </item>
+    </layout>
+   </item>
+   <item>
+    <spacer name="verticalSpacer">
+     <property name="orientation">
+      <enum>Qt::Vertical</enum>
+     </property>
+     <property name="sizeHint" stdset="0">
+      <size>
+       <width>20</width>
+       <height>40</height>
+      </size>
+     </property>
+    </spacer>
+   </item>
+  </layout>
+ </widget>
+ <layoutdefault spacing="6" margin="11"/>
+ <customwidgets>
+  <customwidget>
+   <class>TitleLabel</class>
+   <extends>QLabel</extends>
+   <header location="global">titlelabel.h</header>
+  </customwidget>
+ </customwidgets>
+ <resources/>
+ <connections/>
+</ui>
diff --git a/plugins/vpn/vpnitem.cpp b/plugins/vpn/vpnitem.cpp
new file mode 100644
index 00000000..cdaa397f
--- /dev/null
+++ b/plugins/vpn/vpnitem.cpp
@@ -0,0 +1,124 @@
+/* -*- Mode: C; tab-width: 4; indent-tabs-mode: nil; c-basic-offset: 4 -*-
+ *
+ * Copyright (C) 2022 Tianjin KYLIN Information Technology Co., Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301, USA.
+ *
+ */
+#include "vpnitem.h"
+#include <QPainter>
+#define FRAME_SPEED 150
+#define LIMIT_TIME 60*1000
+#define TOTAL_PAGE 8
+#define RADIUS 6.0
+
+#define THEME_QT_SCHEMA  "org.ukui.style"
+#define MODE_QT_KEY      "style-name"
+
+VpnItem::VpnItem(bool bAcitve, bool isLock, QWidget *parent)
+    : isAcitve(bAcitve), isLock(isLock), QPushButton(parent)
+{
+    this->setMinimumSize(550, 58);
+    this->setProperty("useButtonPalette", true);
+    this->setFlat(true);
+    QPalette pal = this->palette();
+    QColor color = pal.color(QPalette::Button);
+    color.setAlphaF(0.5);
+    pal.setColor(QPalette::Button, color);
+    this->setPalette(pal);
+    QHBoxLayout *mLanLyt = new QHBoxLayout(this);
+    mLanLyt->setContentsMargins(16,0,16,0);
+    mLanLyt->setSpacing(16);
+    iconLabel = new QLabel(this);
+    titileLabel = new FixLabel(this);
+    statusLabel = new QLabel(this);
+    statusLabel->setAlignment(Qt::AlignRight | Qt::AlignVCenter);
+//    statusLabel->setMinimumSize(36,36);
+//    infoLabel = new GrayInfoButton(this);
+    mLanLyt->addWidget(iconLabel);
+    mLanLyt->addWidget(titileLabel,Qt::AlignLeft);
+    mLanLyt->addStretch();
+    mLanLyt->addWidget(statusLabel);
+//    mLanLyt->addWidget(infoLabel);
+
+    loadIcons.append(QIcon::fromTheme("ukui-loading-1-symbolic"));
+    loadIcons.append(QIcon::fromTheme("ukui-loading-2-symbolic"));
+    loadIcons.append(QIcon::fromTheme("ukui-loading-3-symbolic"));
+    loadIcons.append(QIcon::fromTheme("ukui-loading-4-symbolic"));
+    loadIcons.append(QIcon::fromTheme("ukui-loading-5-symbolic"));
+    loadIcons.append(QIcon::fromTheme("ukui-loading-6-symbolic"));
+    loadIcons.append(QIcon::fromTheme("ukui-loading-7-symbolic"));
+
+    waitTimer = new QTimer(this);
+    connect(waitTimer, &QTimer::timeout, this, &VpnItem::updateIcon);
+
+}
+
+void VpnItem::updateIcon()
+{
+    if (currentIconIndex > 6) {
+        currentIconIndex = 0;
+    }
+    statusLabel->setPixmap(loadIcons.at(currentIconIndex).pixmap(16,16));
+    currentIconIndex ++;
+}
+
+void VpnItem::startLoading()
+{
+    waitTimer->start(FRAME_SPEED);
+    loading = true;
+}
+
+void VpnItem::stopLoading(){
+    waitTimer->stop();
+    loading = false;
+}
+
+void VpnItem::paintEvent(QPaintEvent *event)
+{
+    QPalette pal = this->palette();
+
+    QPainter painter(this);
+    painter.setRenderHint(QPainter:: Antialiasing, true);  //设置渲染,启动反锯齿
+    painter.setPen(Qt::NoPen);
+    painter.setBrush(pal.color(QPalette::Base));
+
+    QRect rect = this->rect();
+
+#if 0
+    if (!useHalfFillet) {
+        painter.drawRect(rect);
+    } else {
+        QPainterPath path;
+//        path.addRoundedRect (rect, RADIUS, RADIUS);
+//        QRect temp_rect(rect.left(), rect.top(), rect.width(), rect.height()/2);
+//        path.addRect(temp_rect);
+        //设置起点
+        path.moveTo(rect.topLeft().x(), rect.topLeft().y());
+        path.lineTo(rect.bottomLeft().x(), rect.bottomLeft().y() - RADIUS);
+        //绘制圆角 圆弧以外切圆的270度位置为起点，逆时针画圆弧运行90度结束
+        path.arcTo(QRect(QPoint(rect.bottomLeft().x(), rect.bottomLeft().y() - (RADIUS * 2)), QSize(RADIUS * 2, RADIUS * 2)), 180, 90);
+        path.lineTo(rect.bottomRight().x()  - RADIUS, rect.bottomRight().y());
+        //画圆弧
+        path.arcTo(QRect(QPoint(rect.bottomRight().x() - (RADIUS * 2), rect.bottomRight().y() - (RADIUS * 2)), QSize(RADIUS * 2, RADIUS * 2)), 270, 90);
+        path.lineTo(rect.topRight());
+        path.lineTo(rect.topLeft());
+        painter.drawPath(path);
+    }
+#endif
+
+    painter.drawRect(rect);
+    QPushButton::paintEvent(event);
+}
diff --git a/plugins/vpn/vpnitem.h b/plugins/vpn/vpnitem.h
new file mode 100644
index 00000000..4e79cd3e
--- /dev/null
+++ b/plugins/vpn/vpnitem.h
@@ -0,0 +1,71 @@
+/* -*- Mode: C; tab-width: 4; indent-tabs-mode: nil; c-basic-offset: 4 -*-
+ *
+ * Copyright (C) 2022 Tianjin KYLIN Information Technology Co., Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301, USA.
+ *
+ */
+#ifndef VPNITEM_H
+#define VPNITEM_H
+#include <QWidget>
+#include <QPushButton>
+#include <QHBoxLayout>
+#include <QLabel>
+#include <QVariantMap>
+#include <QTimer>
+#include <QDebug>
+#include <QGSettings>
+#include <QImage>
+#include "fixlabel.h"
+//#include "infobutton.h"
+#include "../component/AddBtn/grayinfobutton.h"
+
+class VpnItem : public QPushButton
+{
+public:
+    VpnItem(bool bAcitve, bool isLock, QWidget *parent = nullptr);
+public:
+    QLabel * iconLabel = nullptr;
+//    GrayInfoButton * infoLabel = nullptr;
+    FixLabel * titileLabel = nullptr;
+    QLabel * statusLabel = nullptr;
+    QString uuid = "";
+
+    void setHalfFillet(bool flag) {useHalfFillet = flag; repaint();}
+public:
+    void startLoading();
+    void stopLoading();
+    bool isAcitve = false;
+    bool loading = false;
+    bool isLock = false;
+
+
+
+protected:
+    void paintEvent(QPaintEvent *event);
+
+private:
+    QTimer *waitTimer = nullptr;
+    QGSettings *themeGsettings = nullptr;
+    bool useHalfFillet = false;
+    QList<QIcon> loadIcons;
+    int currentIconIndex=0;
+
+private slots:
+    void updateIcon();
+
+};
+
+#endif // VPNITEM_H
diff --git a/plugins/wlanconnect/wlanconnect.ui b/plugins/wlanconnect/wlanconnect.ui
index fa8cfe41..99b9e7c2 100644
--- a/plugins/wlanconnect/wlanconnect.ui
+++ b/plugins/wlanconnect/wlanconnect.ui
@@ -184,7 +184,7 @@
   <customwidget>
    <class>TitleLabel</class>
    <extends>QLabel</extends>
-   <header>titlelabel.h</header>
+   <header location="global">titlelabel.h</header>
   </customwidget>
  </customwidgets>
  <resources/>