添加服务器 & 展示服务器

resource/static/main.css

@@ -20,38 +20,8 @@
     margin-top: 75px;
 }
 
-.avatar-list img {
-    width: 2.6rem !important;
-    height: 2.6rem !important;
-    background-color: white;
-}
-
-.card-list {
-    width: 100% !important;
-    padding-right: unset !important;
-}
-
-.card-list .card {
-    width: calc(33.33333333% - 1.1em) !important;
-    margin-right: unset !important;
-    margin-top: unset !important;
-
-}
-
-.card-list .card:nth-child(1) {
-    margin-top: 0.875em !important;
-}
-
-.card-list .card:nth-child(2) {
-    margin-top: 0.875em !important;
-}
-
-.card-list .card:nth-child(3) {
-    margin-top: 0.875em !important;
-}
-
-.grid-list>.grid>.row {
-    border-bottom: solid gainsboro 2px;
-    padding-bottom: .6em;
-    margin-bottom: .6em;
+.footer.segment {
+    margin-top: 40px !important;
+    padding-top: 40px;
+    padding-bottom: 40px;
 }

resource/static/main.js

@@ -1,5 +1,4 @@
 $('.ui.checkbox').checkbox();
-$('.ui.dropdown').dropdown();
 
 const confirmBtn = $('.mini.confirm.modal .positive.button')
 function showConfirm(title, content, callFn, extData) {
@@ -32,7 +31,7 @@ function showFormModal(modelSelector, formID, URL, getData) {
             form.children('.message').remove()
             btn.toggleClass('loading')
             const data = getData ? getData() : $(formID).serializeArray().reduce(function (obj, item) {
-                obj[item.name] = (item.name.endsWith('_id') || item.name === 'id' || item.name === 'permission') ? parseInt(item.value) : item.value;
+                obj[item.name] = (item.name.endsWith('_id') || item.name === 'id') ? parseInt(item.value) : item.value;
                 return obj;
             }, {});
             $.post(URL, JSON.stringify(data)).done(function (resp) {
@@ -54,6 +53,10 @@ function showFormModal(modelSelector, formID, URL, getData) {
     }).modal('show')
 }
 
+function addServer() {
+    showFormModal('.server.modal', '#serverForm', '/api/server')
+}
+
 function logout(id) {
     $.post('/api/logout', JSON.stringify({ id: id })).done(function (resp) {
         if (resp.code == 200) {

resource/template/common/footer.html

@@ -1,4 +1,9 @@
 {{define "common/footer"}}
+<div class="ui inverted vertical footer segment">
+    <div class="ui center aligned text container">
+        本系统由 <a href="https://github.com/p14yground/nezha" target="_blank">哪吒面板</a> 强力驱动
+    </div>
+</div>
 <script src="https://cdnjs.loli.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script src="https://cdnjs.loli.net/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
 <script src="/static/semantic-ui-alerts.min.js"></script>

resource/template/common/menu.html

@@ -5,6 +5,9 @@
             <img src="/static/logo.png">
         </div>
         <a class="item{{if eq .MatchedPath "/"}} active{{end}}" href="/">首页</a>
+        {{if .Admin}}
+        <a class="item{{if eq .MatchedPath "/server"}} active{{end}}" href="/server">服务器</a>
+        {{end}}
         <div class="right menu">
             <a class="item" href="https://github.com/p14yground/nezha/issues" target="_blank">反馈</a>
             <div class="item">

resource/template/component/server.html

@@ -0,0 +1,18 @@
+{{define "component/server"}}
+<div class="ui tiny server modal transition hidden">
+    <div class="header">添加服务器</div>
+    <div class="content">
+        <form id="serverForm" class="ui form">
+            <div class="field">
+                <label>备注</label>
+                <input type="text" name="name" placeholder="爱因斯坦-光速1号">
+            </div>
+        </form>
+    </div>
+    <div class="actions">
+        <div class="ui negative button">取消</div>
+        <button class="ui positive right labeled icon button">绑定<i class="checkmark icon"></i>
+        </button>
+    </div>
+</div>
+{{end}}

resource/template/page/home.html

@@ -3,7 +3,23 @@
 {{template "common/menu" .}}
 <div class="nb-container">
     <div class="ui container">
-        {{.Admin}}
+        <div class="ui four cards">
+            {{range $server := .Servers}}
+            <div class="card">
+                <div class="content">
+                    <div class="header">{{.Name}}</div>
+                    <div class="description">
+                        <div class="ui active progress">
+                            <div class="bar">
+                                <div class="progress"></div>
+                            </div>
+                            <div class="label">CPU</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {{end}}
+        </div>
     </div>
 </div>
 {{template "common/footer" .}}

resource/template/page/server.html

@@ -0,0 +1,30 @@
+{{define "page/server"}}
+{{template "common/header" .}}
+{{template "common/menu" .}}
+<div class="nb-container">
+    <div class="ui container">
+        <button class="ui right labeled positive icon button" onclick="addServer()"><i class="add icon"></i> 添加服务器
+        </button>
+        <table class="ui very basic table">
+            <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>备注</th>
+                    <th>密钥</th>
+                </tr>
+            </thead>
+            <tbody>
+                {{range $server := .Servers}}
+                <tr>
+                    <td>{{$server.ID}}</td>
+                    <td>{{$server.Name}}</td>
+                    <td>{{$server.Secret}}</td>
+                </tr>
+                {{end}}
+            </tbody>
+        </table>
+    </div>
+</div>
+{{template "component/server"}}
+{{template "common/footer" .}}
+{{end}}