首页

public/static/css/style/style.css

@@ -1312,7 +1312,7 @@ ul.sds-desktop-shortcut {
     float: left;
 }
 
-.syno-sysinfo-disconn-button {
+.syno-sysinfo-disconn-button ,.syno-sysinfo-conn-button {
     background-image: url('../../../../public/image/index/minIcon.png') !important;
     background-position: -2px -372px;
     width: 24px;
@@ -1321,6 +1321,10 @@ ul.sds-desktop-shortcut {
     margin: 2px 8px 2px 8px;
 }
 
+.syno-sysinfo-conn-button {
+    background-position: 34px -372px;
+}
+
 .syno-sysinfo-disconn-button:hover{
     background-position: -2px -396px;
 }
@@ -1329,6 +1333,14 @@ ul.sds-desktop-shortcut {
     background-position: -2px -420px;
 }
 
+.syno-sysinfo-conn-button:hover{
+    background-position: 34px -396px;
+}
+
+.syno-sysinfo-conn-button:active{
+    background-position: 34px -420px;
+}
+
 /* 存储 */
 .sds-widget-gridpanel.sys-storage-grid .x-grid3-row .x-grid3-cell-inner {
     height: 82px !important;

src/App.vue

@@ -9,7 +9,7 @@
 
 <script>
 import Header from './component/Header'
-import Desktop form './component/Desktop'
+import Desktop from './component/Desktop'
 export default {
   data() {
     return {

src/component/Desktop/FixWindow/Changelog/index.vue

@@ -0,0 +1,77 @@
+<template>
+    <!-- 文件更改日志 -->
+    <div class="v-widget-item sds-window-v5 syno-sds-widget-item active">
+        <div class="v-widget-item-header"><img
+                :src="ChangeLog.titleImgUrl"
+                class="v-widget-item-header-icon">
+            <div class="v-widget-item-header-title"><span
+                    class="v-widget-item-header-title-text">
+                    {{ChangeLog.title}}
+                </span></div>
+            <div class="v-widget-item-header-tools">
+                <div class="v-widget-item-header-tool-icon minimize"></div>
+                <div class="v-widget-item-header-tool-icon close"></div>
+            </div>
+        </div>
+        <div class="v-widget-item-content">
+            <div class=" x-panel sds-widget-gridpanel x-panel-noborder x-grid-panel x-masked-relative x-masked"
+                style="width: 318px;">
+                <div class="x-panel-bwrap">
+                    <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
+                        style="width: 318px; height: 168px;">
+                        <div class="x-grid3" hidefocus="true"
+                            style="width: 318px; height: 168px;">
+                            <div class="x-grid3-viewport">
+                                <div class="x-grid3-scroller"
+                                    style="overflow: hidden; width: 318px; height: 168px;">
+                                    <div class="x-grid3-body" style="width:287px;">
+                                        &nbsp;</div><a href="#"
+                                        class="x-grid3-focus" tabindex="-1"
+                                        style="left: 0px; top: 0px;"></a>
+                                </div>
+                                <div class="arrow-scroller">
+                                    <div class="up arrow-disabled">
+                                        <div class="arrow-up"></div>
+                                    </div>
+                                    <div class="down arrow-disabled">
+                                        <div class="arrow-down"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="x-grid3-resize-marker">
+                                &nbsp;</div>
+                            <div class="x-grid3-resize-proxy">&nbsp;
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ext-el-mask"></div>
+                <div class="ext-el-mask-msg" style="left: 105px; top: 66px;">
+                    <div tabindex="0" class="x-loading-message-inner"
+                        role="article">
+                        无可用日志</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+
+export default {
+  data() {
+    return {
+        ChangeLog:{
+            id: 1,
+            title: '文件更新日志',
+            titleImgUrl: '../../../../../../public/image/index/wdgt_icn_title_file_change_logs.png',
+            detailMessageList: []
+            cls:'',
+        }
+    }
+  },
+  components:{
+  },
+  name:'ChangeLog'
+
+}
+</script>

src/component/Desktop/FixWindow/ConnectedUser/index.vue

@@ -0,0 +1,147 @@
+<template>
+    <!-- 已连接用户 -->
+    <div class="v-widget-item sds-window-v5 syno-sds-widget-item active">
+        <div class="v-widget-item-header"><img
+                :src="connectedUserDetail.titleImgUrl"
+                class="v-widget-item-header-icon">
+            <div class="v-widget-item-header-title"><span
+                    class="v-widget-item-header-title-text">
+                    {{connectedUserDetail.title}}
+                </span></div>
+            <div class="v-widget-item-header-tools">
+                <div class="v-widget-item-header-tool-icon minimize"></div>
+                <div class="v-widget-item-header-tool-icon close"></div>
+            </div>
+        </div>
+        <div class="v-widget-item-content">
+            <div class=" x-panel sds-widget-gridpanel x-panel-noborder x-grid-panel"
+                style="width: 318px;">
+                <div class="x-panel-bwrap">
+                    <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
+                        style="width: 318px; height: 168px;">
+                        <div class="x-grid3" hidefocus="true"
+                            style="width: 318px; height: 168px;">
+                            <div class="x-grid3-viewport">
+                                <div class="x-grid3-scroller"
+                                    style="overflow: hidden; width: 318px; height: 168px;">
+                                    <div class="x-grid3-body" style="width:294px;" v-for="detailMessage in connectedUserDetail.detailMessageList">
+                                        <div class="x-grid3-row  x-grid3-row-first x-grid3-row-last"
+                                            style="width:294px;">
+                                            <table class="x-grid3-row-table"
+                                                border="0" cellspacing="0"
+                                                cellpadding="0"
+                                                style="width:294px;">
+                                                <tbody>
+                                                    <tr>
+                                                        <td class="x-grid3-col x-grid3-cell x-grid3-td-0 x-grid3-cell-first x-grid3-cell-first-visible "
+                                                            style="padding: 0px;width: 38px;"
+                                                            tabindex="0">
+                                                            <div
+                                                                class="x-grid3-cell-inner x-grid3-col-0 x-unselectable">
+                                                                <div
+                                                                    :class="detailMessage.cls">
+                                                                </div>
+                                                            </div>
+                                                        </td>
+                                                        <td class="x-grid3-col x-grid3-cell x-grid3-td-who "
+                                                            style="padding: 0px 6px 0px 0px;width: 80px;"
+                                                            tabindex="0">
+                                                            <div
+                                                                class="x-grid3-cell-inner x-grid3-col-who x-unselectable">
+                                                                <div
+                                                                    class="syno-sysinfo-username">
+                                                                </div>{{detailMessage.title}}
+                                                            </div>
+                                                        </td>
+                                                        <td class="x-grid3-col x-grid3-cell x-grid3-td-type "
+                                                            style="padding: 0px 6px 0px 0px;width: 64px;"
+                                                            tabindex="0">
+                                                            <div
+                                                                class="x-grid3-cell-inner x-grid3-col-type x-unselectable">
+                                                                {{detailMessage.text}}</div>
+                                                        </td>
+                                                        <td class="x-grid3-col x-grid3-cell x-grid3-td-time "
+                                                            style="padding: 0px 2px 0px 0px;width: 64px;"
+                                                            tabindex="0">
+                                                            <div
+                                                                class="x-grid3-cell-inner x-grid3-col-time x-unselectable">
+                                                                {{detailMessage.task}}</div>
+                                                        </td>
+                                                        <td class="x-grid3-col x-grid3-cell x-grid3-td-kick x-grid3-cell-last x-grid3-cell-last-visible "
+                                                            style="width: 38px;"
+                                                            tabindex="0">
+                                                            <div
+                                                                class="x-grid3-cell-inner x-grid3-col-kick x-unselectable">
+                                                                <div
+                                                                    class="syno-crrentconn-split">
+                                                                </div>
+                                                                <div
+                                                                    :class="detailMessage.cls1">
+                                                                </div>
+                                                            </div>
+                                                        </td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div><a href="#" class="x-grid3-focus"
+                                        tabindex="-1"
+                                        style="left: 0px; top: 0px;"></a>
+                                </div>
+                                <div class="arrow-scroller">
+                                    <div class="up arrow-disabled">
+                                        <div class="arrow-up"></div>
+                                    </div>
+                                    <div class="down arrow-disabled">
+                                        <div class="arrow-down"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="x-grid3-resize-marker">
+                                &nbsp;</div>
+                            <div class="x-grid3-resize-proxy">&nbsp;
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+        connectedUserDetail:{
+            id: 1,
+            title: '已连接用户',
+            titleImgUrl: '../../../../public/image/index/wdgt_icn_title_current_connections.png',
+            detailMessageList: [
+                {
+                    id: 10,
+                    title: 'synology',
+                    text: 'HTTP/HTTPS',
+                    task:  '00:16:15',
+                    cls: 'syno-crrentconn-icon',
+                    cls1:'syno-sysinfo-disconn-button',
+                },
+                {
+                    id: 11,
+                    title: 'synology',
+                    text: 'HTTP/HTTPS',
+                    task:  '00:16:15',
+                    cls: 'syno-crrentconn-icon',
+                    cls1:'syno-sysinfo-conn-button'
+                }
+            ]
+        }
+    }
+  },
+  components:{
+  },
+  name:'ConnectedUser',
+
+}
+</script>

src/component/Desktop/FixWindow/Copy/index.vue

@@ -0,0 +1,133 @@
+<template>
+    <!-- 备份 -->
+    <div class="v-widget-item sds-window-v5 syno-sds-widget-item active">
+        <div class="v-widget-item-header"><img
+                :src="copyDetail.titleImgUrl"
+                class="v-widget-item-header-icon">
+            <div class="v-widget-item-header-title"><span
+                    class="v-widget-item-header-title-text">
+                    {{copyDetail.title}}
+                </span></div>
+            <div class="v-widget-item-header-tools">
+                <div class="v-widget-item-header-tool-icon minimize"></div>
+                <div class="v-widget-item-header-tool-icon close"></div>
+            </div>
+        </div>
+        <div class="v-widget-item-content">
+            <div class=" x-panel sds-widget-gridpanel syno-sds-backupapp-widget-panel x-panel-noborder x-grid-panel"
+                style="width: 318px;">
+                <div class="x-panel-bwrap">
+                    <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
+                        style="width: 318px; height: 168px;">
+                        <div class="x-grid3" hidefocus="true"
+                            style="width: 318px; height: 168px;">
+                            <div class="x-grid3-viewport">
+                                
+                                <div class="x-grid3-scroller"
+                                    style="overflow: hidden; width: 318px; height: 168px;">
+                                    <div class="x-grid3-body" style="width:290px;">
+                                        <div class="x-grid3-row  x-grid3-row-first"
+                                            style="width:290px;" v-for="detailMessageList in copyDetail.detailMessageList" key="detailMessageList.id">
+                                            <table class="x-grid3-row-table"
+                                                border="0" cellspacing="0"
+                                                cellpadding="0"
+                                                style="width:290px;">
+                                                <tbody>
+                                                    <tr>
+                                                        <td class="x-grid3-col x-grid3-cell x-grid3-td-bkpstatus x-grid3-cell-first x-grid3-cell-first-visible x-grid3-cell-last-visible "
+                                                            style="width: 288px;"
+                                                            tabindex="0">
+                                                            <div
+                                                                class="x-grid3-cell-inner x-grid3-col-bkpstatus x-unselectable">
+                                                                <div
+                                                                    class="syno-sds-backupapp-scedule-enable">
+                                                                    <div
+                                                                        class="syno-sds-backupapp-scedule-icon" :class="detailMessageList.cls">
+                                                                    </div>
+                                                                    <div
+                                                                        class="syno-sds-backupapp-scedule-content">
+                                                                        <div
+                                                                            class="syno-sds-backupapp-scedule-title-bar">
+                                                                            <div
+                                                                                class="syno-sds-backupapp-scedule-title">
+                                                                                {{detailMessageList.title}}
+                                                                            </div>
+                                                                            <div
+                                                                                class="syno-sds-backupapp-scedule-time">
+                                                                                {{detailMessageList.text}}
+                                                                            </div>
+                                                                        </div>
+                                                                        <div
+                                                                            class="">
+                                                                            <div
+                                                                                class="syno-sds-backupapp-scedule-task">
+                                                                               {{detailMessageList.text}}
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div><a href="#" class="x-grid3-focus"
+                                        tabindex="-1"
+                                        style="left: 0px; top: 0px;"></a>
+                                </div>
+                                <div class="arrow-scroller">
+                                    <div class="up arrow-disabled">
+                                        <div class="arrow-up"></div>
+                                    </div>
+                                    <div class="down arrow-disabled">
+                                        <div class="arrow-down"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="x-grid3-resize-marker">
+                                &nbsp;</div>
+                            <div class="x-grid3-resize-proxy">&nbsp;
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+        copyDetail:{
+            id: 1,
+            title: '备份',
+            titleImgUrl: '../../../../../public/image/index/fileCopy.png',
+            detailMessageList: [
+                {
+                    id: 10,
+                    title: '备份结果',
+                    text: '--：--：--',
+                    task:  ` 任务名称: 无任何备份结果`,
+                    cls: 'no-result',
+                },
+                {
+                    id: 11,
+                    title: '备份计划管理',
+                    text: '--：--：--',
+                    task: `任务名称: 没有计划备份`,
+                    cls: 'schedule-inactive',
+                }
+            ]
+        }
+    }
+  },
+  components:{
+  },
+  name:'Copy',
+  
+
+}
+</script>

src/component/Desktop/FixWindow/NewLog/index.vue

@@ -0,0 +1,140 @@
+ 
+<template>
+    <!-- 最新日志 -->
+    <div class="v-widget-item sds-window-v5 syno-sds-widget-item active">
+        <div class="v-widget-item-header"><img
+                :src="logDetail.titleImgUrl"
+                class="v-widget-item-header-icon">
+            <div class="v-widget-item-header-title"><span
+                    class="v-widget-item-header-title-text">
+                    {{logDetail.title}}
+                </span></div>
+            <div class="v-widget-item-header-tools">
+                <div class="v-widget-item-header-tool-icon minimize"></div>
+                <div class="v-widget-item-header-tool-icon close"></div>
+            </div>
+        </div>
+        <div class="v-widget-item-content">
+            <div class=" x-panel sds-widget-gridpanel x-panel-noborder x-grid-panel"
+                style="width: 318px;">
+                <div class="x-panel-bwrap">
+                    <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
+                        style="width: 318px; height: 168px;">
+                        <div class="x-grid3" hidefocus="true"
+                            style="width: 318px; height: 168px;">
+                            <div class="x-grid3-viewport">
+                                <div class="x-grid3-scroller"
+                                    style="overflow: hidden; width: 318px; height: 168px;">
+                                    <div class="x-grid3-body" style="width:289px;">
+                                        <div class="x-grid3-row  x-grid3-row-first"
+                                            style="width:289px;"
+                                            v-for="detailMessage in logDetail.detailMessageList" :key="detailMessage.id">
+                                            <table class="x-grid3-row-table"
+                                                border="0" cellspacing="0"
+                                                cellpadding="0"
+                                                style="width:289px;">
+                                                <tbody>
+                                                    <tr>
+                                                        <td class="x-grid3-col x-grid3-cell x-grid3-td-0 x-grid3-cell-first x-grid3-cell-first-visible "
+                                                            style="padding: 0;width: 35px;text-align: center;"
+                                                            tabindex="0">
+                                                            <div
+                                                                class="x-grid3-cell-inner x-grid3-col-0 x-unselectable">
+                                                                <div
+                                                                    class="log-info" :class="detailMessage.cls">
+                                                                    &nbsp;</div>
+                                                            </div>
+                                                        </td>
+                                                        <td class="x-grid3-col x-grid3-cell x-grid3-td-msg x-grid3-cell-last x-grid3-cell-last-visible "
+                                                            style="white-space:normal;width: 250px;"
+                                                            tabindex="0">
+                                                            <div
+                                                                class="x-grid3-cell-inner x-grid3-col-msg x-unselectable">
+                                                                {{detailMessage.text}}</div>
+                                                        </td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div><a href="#" class="x-grid3-focus"
+                                        tabindex="-1"
+                                        style="left: 0px; top: 0px;"></a>
+                                </div>
+                                <div class="arrow-scroller">
+                                    <div class="up arrow-disabled">
+                                        <div class="arrow-up"></div>
+                                    </div>
+                                    <div class="down">
+                                        <div class="arrow-down"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="x-grid3-resize-marker">
+                                &nbsp;</div>
+                            <div class="x-grid3-resize-proxy">&nbsp;
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+        logDetail:{
+            id: 1,
+            title: '最新日志',
+            titleImgUrl: '../../../../public/image/index/recentLogs.png',
+            detailMessageList: [
+                {
+                    id: 10,
+                    text: 'User [synology] from [172.21.2.22] signedin to [DSM] successfully via [password].',
+                    cls: 'sds-recentlog-loglevel',
+                },
+                {
+                    id: 11,
+                    text: 'User [synology] from [172.21.2.22] signedin to [DSM] successfully via [password].',
+                    cls: 'sds-recentlog-loglevel',
+                },
+                {
+                    id: 12,
+                    text: 'User [synology] from [172.21.2.22] signedin to [DSM] successfully via [password].',
+                    cls: 'sds-recentlog-loglevel',
+                },
+                {
+                    id: 13,
+                    text: 'User [synology] from [172.21.2.22] signedin to [DSM] successfully via [password].',
+                    cls: 'sds-recentlog-loglevel',
+                },
+                {
+                    id: 14,
+                    text: 'User [synology] from [172.21.2.22] signedin to [DSM] successfully via [password].',
+                    cls: 'sds-recentlog-loglevel',
+                },
+                {
+                    id: 15,
+                    text: 'User [synology] from [172.21.2.22] signedin to [DSM] successfully via [password].',
+                    cls: 'sds-recentlog-loglevel',
+                },
+                {
+                    id: 16,
+                    text: 'User [synology] from [172.21.2.22] signedin to [DSM] successfully via [password].',
+                    cls: 'sds-recentlog-loglevel',
+                }
+            ]
+        }
+    }
+  },
+  components:{
+  },
+  name:'NewLog',
+  
+
+}
+</script>
+ 

src/component/Desktop/FixWindow/ResourceMonitor/index.vue

@@ -0,0 +1,162 @@
+<template>
+    <!-- 资源监控 -->
+    <div class="v-widget-item sds-window-v5 syno-sds-widget-item active">
+        <div class="v-widget-item-header"><img
+                :src="resourceMonitorDetail.titleImgUrl"
+                class="v-widget-item-header-icon">
+            <div class="v-widget-item-header-title"><span
+                    class="v-widget-item-header-title-text">
+                    {{resourceMonitorDetail.title}}
+                </span></div>
+            <div class="v-widget-item-header-tools">
+                <div class="v-widget-item-header-tool-icon toolbar"></div>
+                <div class="v-widget-item-header-tool-icon minimize"></div>
+                <div class="v-widget-item-header-tool-icon close"></div>
+            </div>
+        </div>
+        <div class="v-widget-item-content">
+            <div class=" x-panel resource-monitor-widget x-panel-noborder"
+                style="width: 296px; height: 163px;">
+                <div class="x-panel-bwrap">
+                    <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder x-box-layout-ct"
+                        style="width: 296px; height: 159px;">
+                        <div class="x-box-inner"
+                            style="width: 296px; height: 164px;">
+                            <div class=" resource-monitor-percentage-cmp horizontal x-box-item"
+                                style="width: 296px; height: 24px; left: 0px; top: 0px;">
+                                <div class="percentage-cmp-title">CPU</div>
+                                <div class="percentage-cmp-hbar-background">
+                                    <div class="percentage-cmp-hbar-fill"
+                                        style="width: 1.6px;"></div>
+                                </div>
+                                <div class="percentage-cmp-value">1%
+                                </div>
+                            </div>
+                            <div class=" resource-monitor-percentage-cmp horizontal x-box-item"
+                                style="width: 296px; height: 24px; left: 0px; top: 24px;">
+                                <div class="percentage-cmp-title">RAM</div>
+                                <div class="percentage-cmp-hbar-background">
+                                    <div class="percentage-cmp-hbar-fill"
+                                        style="width: 44.8px;"></div>
+                                </div>
+                                <div class="percentage-cmp-value">
+                                    28%</div>
+                            </div>
+                            <div class=" x-panel resource-Monitor-networkio-cmp x-panel-noborder x-box-item"
+                                style="width: 296px; left: 0px; top: 48px;">
+                                <div class="x-panel-bwrap">
+                                    <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
+                                        style="width: 296px; height: 24px;">
+                                        <div
+                                            style="float: left; width: 86px; height: 24px;">
+                                            <span cellspacing="0"
+                                                class="x-btn interface-selection-button syno-ux-button syno-ux-button-default syno-ux-button-dropdown x-btn-noicon"
+                                                style="margin-left: 0px; width: auto;">
+                                                <em
+                                                    class="x-btn-arrow x-unselectable"><button
+                                                        type="button"
+                                                        aria-label="总计"
+                                                        class=" x-btn-text"
+                                                        aria-level="1"
+                                                        aria-expanded="false"
+                                                        aria-haspopup="true"
+                                                        aria-owns="ext-comp-1078">总计</button></em></span>
+                                        </div>
+                                        <div
+                                            class=" x-form-display-field networkio-cmp-icon out">
+                                        </div>
+                                        <div
+                                            class=" x-form-display-field networkio-cmp-label out">
+                                            1.2 KB/s</div>
+                                        <div
+                                            class=" x-form-display-field networkio-cmp-icon in">
+                                        </div>
+                                        <div
+                                            class=" x-form-display-field networkio-cmp-label">
+                                            4.4 KB/s</div>
+                                        <div role="presentation"
+                                            class="x-form-hidden-error-msg"></div>
+                                        <div role="presentation"
+                                            class="x-form-hidden-error-msg"></div>
+                                        <div role="presentation"
+                                            class="x-form-hidden-error-msg"></div>
+                                        <div role="presentation"
+                                            class="x-form-hidden-error-msg"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="resource-Monitor-widget-panel resource-Monitor-widget-panel-noborder x-box-item"
+                                style="width: 296px; left: 0px; top: 72px;">
+                                <div class="resource-Monitor-widget-panel-bwrap">
+                                    <div class="resource-Monitor-widget-panel-body resource-Monitor-widget-panel-body-noheader resource-Monitor-widget-panel-body-noborder"
+                                        style="width: 296px; height: 92px;">
+                                        <div class=" resource-Monitor-widget-panel resource-Monitor-widget-panel-noborder"
+                                            style="width: 296px;">
+                                            <div
+                                                class="resource-Monitor-widget-panel-bwrap">
+                                                <div class="resource-Monitor-widget-panel-body resource-Monitor-widget-panel-body-noheader resource-Monitor-widget-panel-body-noborder"
+                                                    style="width: 296px; height: 92px;">
+                                                    <div class=" resource-Monitor-widget-base echarts-wrapper"
+                                                        _echarts_instance_="ec_1649731283195"
+                                                        style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
+                                                        <div
+                                                            style="position: relative; overflow: hidden; width: 296px; height: 92px; padding: 0px; margin: 0px; border-width: 0px;">
+                                                            <canvas width="296"
+                                                                height="92"
+                                                                style="position: absolute; left: 0px; top: 0px; width: 296px; height: 92px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
+                                                        </div>
+                                                        <div></div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class=" resource-Monitor-widget-panel resource-Monitor-widget-panel-noborder x-hide-display"
+                                            style="width: 296px;">
+                                            <div
+                                                class="resource-Monitor-widget-panel-bwrap">
+                                                <div class="resource-Monitor-widget-panel-body resource-Monitor-widget-panel-body-noheader resource-Monitor-widget-panel-body-noborder"
+                                                    style="width: 296px; height: 84px;">
+                                                    <div class=" resource-Monitor-widget-base echarts-wrapper"
+                                                        _echarts_instance_="ec_1649731283196"
+                                                        style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
+                                                        <div
+                                                            style="position: relative; overflow: hidden; width: 296px; height: 92px; padding: 0px; margin: 0px; border-width: 0px;">
+                                                            <canvas width="296"
+                                                                height="92"
+                                                                style="position: absolute; left: 0px; top: 0px; width: 296px; height: 92px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
+                                                        </div>
+                                                        <div></div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+        resourceMonitorDetail:{
+            id: 1,
+            title: '资源监控',
+            titleImgUrl: '../../../../public/image/index/resource.png',
+        }
+
+    }
+  },
+  components:{
+  },
+  name:'ResourceMonitor'
+
+}
+</script>

src/component/Desktop/FixWindow/RunningState/index.vue

@@ -0,0 +1,201 @@
+<template>
+    <!-- 系统状况 -->
+    <div class="v-widget-item sds-window-v5 syno-sds-widget-item active">
+        <div class="v-widget-item-header"><img
+                :src="runningStateDetail.titleImgUrl"
+                class="v-widget-item-header-icon">
+            <div class="v-widget-item-header-title"><span
+                    class="v-widget-item-header-title-text">
+                    {{runningStateDetail.title}}
+                </span></div>
+            <div class="v-widget-item-header-tools">
+                <div class="v-widget-item-header-tool-icon toolbar"></div>
+                <div class="v-widget-item-header-tool-icon minimize"></div>
+                <div class="v-widget-item-header-tool-icon close"></div>
+            </div>
+        </div>
+        <div class="v-widget-item-content">
+            <div class=" x-panel x-panel-noborder"
+                style="width: 318px; height: 172px;">
+                <div class="x-panel-bwrap">
+                    <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
+                        style="width: 318px; height: 168px;">
+                        <div class=" x-panel syno-sysinfo-system-health x-panel-noborder"
+                            style="width: 318px;">
+                            <div class="x-panel-bwrap">
+                                <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder x-box-layout-ct"
+                                    style="padding: 0px 11px 5px; width: 296px; height: 163px;">
+                                    <div class="x-box-inner"
+                                        style="width: 296px; height: 164px;">
+                                        <div class=" syno-sysinfo-system-health-status x-box-item"
+                                            style="width: 296px; height: 76px; left: 0px; top: 0px;">
+                                            <div>
+                                                <div
+                                                    class="syno-sysinfo-system-health-west-normal">
+                                                </div>
+                                            </div>
+                                            <div>
+                                                <div
+                                                    class="syno-sysinfo-system-health-content-wrap">
+                                                    <div
+                                                        class="syno-sysinfo-system-health-summary syno-sysinfo-system-health-content-header-normal">
+                                                        正常</div>
+                                                    <div
+                                                        class="syno-sysinfo-system-health-content">
+                                                        您的 VirtualDSM 运转正常。</div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class=" x-panel x-panel-noborder x-box-item"
+                                            style="width: 296px; left: 0px; top: 80px;">
+                                            <div class="x-panel-bwrap">
+                                                <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
+                                                    style="width: 296px; height: 84px;">
+                                                    <div
+                                                        class=" x-panel sys-info-south-table">
+                                                        <div class="x-panel-bwrap">
+                                                            <div class="x-panel-body x-panel-body-noheader x-table-layout-ct"
+                                                                style="height: 82px;">
+                                                                <table
+                                                                    class="x-table-layout"
+                                                                    cellspacing="0">
+                                                                    <tbody>
+                                                                        <tr>
+                                                                            <td
+                                                                                class="x-table-layout-cell">
+                                                                                <div>
+                                                                                    <p
+                                                                                        class="syno-sysinfo-system-health-south-title">
+                                                                                        服务器名称
+                                                                                    </p>
+                                                                                </div>
+                                                                            </td>
+                                                                            <td
+                                                                                class="x-table-layout-cell">
+                                                                                <div>
+                                                                                    <p
+                                                                                        class="syno-sysinfo-system-health-south-data">
+                                                                                        DSM-Demo
+                                                                                    </p>
+                                                                                </div>
+                                                                            </td>
+                                                                        </tr>
+                                                                        <tr>
+                                                                            <td
+                                                                                class="x-table-layout-cell sys-info-row x-row-alt row-left">
+                                                                                <div
+                                                                                    class=" x-panel">
+                                                                                    <div
+                                                                                        class="x-panel-bwrap">
+                                                                                        <div
+                                                                                            class="x-panel-body x-panel-body-noheader">
+                                                                                            <span
+                                                                                                cellspacing="0"
+                                                                                                class="x-btn sys-info-btn syno-ux-button syno-ux-button-default syno-ux-button-dropdown x-btn-noicon"
+                                                                                                style="width: auto; margin-left: 0px;"><em
+                                                                                                    class="x-btn-arrow x-unselectable"><button
+                                                                                                        type="button"
+                                                                                                        aria-label="局域网 1"
+                                                                                                        class=" x-btn-text"
+                                                                                                        aria-level="1"
+                                                                                                        aria-expanded="false"
+                                                                                                        aria-haspopup="true"
+                                                                                                        aria-owns="ext-comp-1058">局域网
+                                                                                                    </button></em></span>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </td>
+                                                                            <td
+                                                                                class="x-table-layout-cell sys-info-row x-row-alt">
+                                                                                <div>
+                                                                                    <p
+                                                                                        class="syno-sysinfo-system-health-south-data">
+                                                                                        172.21.2.64
+                                                                                    </p>
+                                                                                </div>
+                                                                            </td>
+                                                                        </tr>
+                                                                        <tr>
+                                                                            <td
+                                                                                class="x-table-layout-cell">
+                                                                                <div>
+                                                                                    <p
+                                                                                        class="syno-sysinfo-system-health-south-title">
+                                                                                        运行时间
+                                                                                    </p>
+                                                                                </div>
+                                                                            </td>
+                                                                            <td
+                                                                                class="x-table-layout-cell">
+                                                                                <div>
+                                                                                    <p
+                                                                                        class="syno-sysinfo-system-health-south-data">
+                                                                                        04:22:02
+                                                                                    </p>
+                                                                                </div>
+                                                                            </td>
+                                                                        </tr>
+                                                                    </tbody>
+                                                                </table>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+        runningStateDetail:{
+            id: 1,
+            title: '系统状况',
+            titleImgUrl: '../../../../public/image/index/windowInfo.png',
+            centerDetail:{
+                title:'正常状态',
+                text:'您的 VirtualDSM 运转正常。',
+                cls:'syno-sysinfo-system-health-west-normal',
+            },
+            
+            detailMessageList: [
+                {
+                    id: 10,
+                    title: '服务器名称',
+                    text: 'DSM-Demo',
+                    cls: '',
+                },
+                {
+                    id: 11,
+                    title: '局域网',
+                    text: '172.21.2.64',
+                    cls: '',
+                },
+                 {
+                    id: 11,
+                    title: '运行时间',
+                    text: '04:22:02',
+                    cls: '',
+                }
+            ]
+        }
+    }
+  },
+  components:{
+  },
+  name:'RunningState',
+
+}
+</script>

src/component/Desktop/FixWindow/ScheduledTask/index.vue

@@ -0,0 +1,127 @@
+<template>
+    <!-- 计划的任务 -->
+    <div class="v-widget-item sds-window-v5 syno-sds-widget-item active">
+        <div class="v-widget-item-header"><img
+                :src="scheduledTaskDetail.titleImgUrl"
+                class="v-widget-item-header-icon">
+            <div class="v-widget-item-header-title"><span
+                    class="v-widget-item-header-title-text">
+                    {{scheduledTaskDetail.title}}
+                </span></div>
+            <div class="v-widget-item-header-tools">
+                <div class="v-widget-item-header-tool-icon minimize"></div>
+                <div class="v-widget-item-header-tool-icon close"></div>
+            </div>
+        </div>
+        <div class="v-widget-item-content">
+            <div class=" x-panel sds-widget-gridpanel x-panel-noborder x-grid-panel"
+                style="width: 318px;">
+                <div class="x-panel-bwrap">
+                    <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
+                        style="width: 318px; height: 168px;">
+                        <div class="x-grid3" hidefocus="true"
+                            style="width: 318px; height: 168px;">
+                            <div class="x-grid3-viewport">
+                                <div class="x-grid3-header" style="display: none;">
+                                    <div class="x-grid3-header-inner"
+                                        style="width: 318px;">
+                                    </div>
+                                    <div class="x-clear"></div>
+                                </div>
+                                <div class="x-grid3-scroller"
+                                    style="overflow: hidden; width: 318px; height: 168px;">
+                                    <div class="x-grid3-body" style="width:292px;" v-for="detailMessage in scheduledTaskDetail.detailMessageList" :key="detailMessage.id">
+                                        <div class="x-grid3-row  x-grid3-row-first x-grid3-row-last"
+                                            style="width:292px;">
+                                            <table class="x-grid3-row-table"
+                                                border="0" cellspacing="0"
+                                                cellpadding="0"
+                                                style="width:292px;">
+                                                <tbody>
+                                                    <tr>
+                                                        <td class="x-grid3-col x-grid3-cell x-grid3-td-enable x-grid3-cell-first x-grid3-cell-first-visible "
+                                                            style="padding: 0px;width: 38px;"
+                                                            tabindex="0">
+                                                            <div
+                                                                class="x-grid3-cell-inner x-grid3-col-enable x-unselectable">
+                                                                <div
+                                                                    :class="detailMessage.cls">
+                                                                </div>
+                                                            </div>
+                                                        </td>
+                                                        <td class="x-grid3-col x-grid3-cell x-grid3-td-name "
+                                                            style="padding: 0px 6px 0px 0px;width: 132px;"
+                                                            tabindex="0">
+                                                            <div
+                                                                class="x-grid3-cell-inner x-grid3-col-name x-unselectable">
+                                                                {{detailMessage.title}}</div>
+                                                        </td>
+                                                        <td class="x-grid3-col x-grid3-cell x-grid3-td-next_trigger_time x-grid3-cell-last x-grid3-cell-last-visible "
+                                                            style="padding: 0px;width: 116px;"
+                                                            tabindex="0">
+                                                            <div
+                                                                class="x-grid3-cell-inner x-grid3-col-next_trigger_time x-unselectable">
+                                                                {{detailMessage.text}}
+                                                            </div>
+                                                        </td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                    <a href="#" class="x-grid3-focus" tabindex="-1"
+                                        style="left: 0px; top: 0px;"></a>
+                                </div>
+                                <div class="arrow-scroller">
+                                    <div class="up arrow-disabled">
+                                        <div class="arrow-up"></div>
+                                    </div>
+                                    <div class="down arrow-disabled">
+                                        <div class="arrow-down"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="x-grid3-resize-marker">
+                                &nbsp;</div>
+                            <div class="x-grid3-resize-proxy">&nbsp;
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+        scheduledTaskDetail:{
+            id: 1,
+            title: '计划的任务',
+            titleImgUrl: '../../../../public/image/index/wdgt_icn_title_scheduled_tasks.png',
+            detailMessageList: [
+                {
+                    id: 10,
+                    title: 'mailplus-demo',
+                    text: '2022-04-14 00:00',
+                    cls: 'syno-taskscheduler-enable-taskicon',
+                },
+                {
+                    id: 11,
+                     title: 'mailplus-demo',
+                    text: '2022-04-14 00:00',
+                    cls: 'syno-taskscheduler-enable-taskicon',
+                }
+            ]
+        }
+    }
+  },
+  components:{
+  },
+  name:'ScheduledTask'
+
+}
+</script>

src/component/Desktop/Menu/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <!-- 打开的菜单图标显示区 -->
+  <div class="menu sds-desktop">
+    <ul class="menushow">
+      <li :class="menu.spacialCls" v-for="menu in menuList" :key="menu.index" style="background:rgba(225,225,225,0.5);" :aria-label="menu.ariaLabel">
+        <div :class="menuItem" :style="{backgroundImage:`url(${menu.imgUrl})`}"></div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      menuList:[
+        {
+          id:'0',
+          spacialCls:'tjCenter',
+          ariaLabel:'套件中心',
+          imgUrl:'../../../../public/image/index/tjCenter.png',
+        }
+      ]
+    }
+  },
+  name:'Menu',
+
+}
+</script>

src/component/Desktop/Shortcut/index.vue

@@ -0,0 +1,84 @@
+<template>
+    <!-- 菜单区-->
+    <ul id="sds-desktop-shortcut" class="sds-desktop-shortcut">
+        <div class="sds-desktop-layout">
+            <li class="launch-icon icon-item" :class="launchIcon.spacialCls" :aria-label="launchIcon.ariaLabel" tabindex="0" v-for="launchIcon in launchIconList" :key="launchIcon.id">
+                <div class="image" :style="{backgroundImage:`url(${launchIcon.imgUrl})`}">
+                    <div class="sds-application-notify-badge-num-wrap">
+                        <div class="sds-application-notify-badge-num" style="opacity: 0;"></div>
+                    </div>
+                </div>
+                <div class="text">{{launchIcon.ariaLabel}}</div>
+
+            </li>
+            <!-- 
+                <li class="launch-icon icon-item controlCenter" aria-label="控制面板">
+                    <div class="image" style="background-image: url(../../../public//image/index/controlCenter.png)">
+                        <div class="sds-application-notify-badge-num-wrap">
+                            <div class="sds-application-notify-badge-num" style="opacity: 0;"></div>
+                        </div>
+                    </div>
+                    <div class="text">控制面板</div>
+
+                </li>
+                <li class="launch-icon icon-item file" aria-label="File Station">
+                    <div class="image" style="background-image: url(../../../public//image/index/file.png)">
+                        <div class="sds-application-notify-badge-num-wrap">
+                            <div class="sds-application-notify-badge-num" style="opacity: 0;"></div>
+                        </div>
+                    </div>
+                    <div class="text">File Station</div>
+
+                </li>
+                <li class="launch-icon icon-item question" aria-label="DSM说明">
+                    <div class="image" style="background-image: url(../../../public//image/index/question.png)">
+                        <div class="sds-application-notify-badge-num-wrap">
+                            <div class="sds-application-notify-badge-num" style="opacity: 0;"></div>
+                        </div>
+                    </div>
+                    <div class="text">DSM 说明</div>
+
+                </li>
+            -->
+        </div>
+    </ul>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+        launchIconList:[
+            {
+                id:'0',
+                spacialCls:'tjCenter',
+                ariaLabel:'套件中心',
+                imgUrl:'../../../../public/image/index/tjCenter.png'
+            },
+            {
+                id:'1',
+                spacialCls:'controlCenter',
+                ariaLabel:'套件中心',
+                imgUrl:'../../../../public/image/index/controlCenter.png'
+            },
+            {
+                id:'2',
+                spacialCls:'file',
+                ariaLabel:'File Station',
+                imgUrl:'../../../../public/image/index/file.png'
+            },
+            {
+                id:'3',
+                spacialCls:'question',
+                ariaLabel:'DSM 说明',
+                imgUrl:'../../../../public/image/index/question.png'
+            }
+        ]
+    }
+  },
+  components:{
+  },
+  name:'Shortcut',
+
+}
+</script>

src/component/Header/index.vue

@@ -35,7 +35,7 @@
 export default {
   data() {
     return {
-      num: 123456
+        
     }
   },
   name:'Header',

src/main.js

@@ -1,6 +1,5 @@
 import { createApp } from 'vue';
 import App from './App.vue'
-
 const app = createApp(App);
 app.mount("#root");