搭好主体结构布局

.idea/inspectionProfiles/Project_Default.xml

@@ -4,7 +4,7 @@
     <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="myValues">
         <value>
-          <list size="10">
+          <list size="11">
             <item index="0" class="java.lang.String" itemvalue="nobr" />
             <item index="1" class="java.lang.String" itemvalue="noembed" />
             <item index="2" class="java.lang.String" itemvalue="comment" />
@@ -15,6 +15,7 @@
             <item index="7" class="java.lang.String" itemvalue="el-form-item" />
             <item index="8" class="java.lang.String" itemvalue="el-input" />
             <item index="9" class="java.lang.String" itemvalue="el-button" />
+            <item index="10" class="java.lang.String" itemvalue="el-link" />
           </list>
         </value>
       </option>

.idea/workspace.xml

@@ -2,9 +2,13 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="690c02a3-0e7d-4c4a-8f0c-a44c44c3a162" name="Default Changelist" comment="">
+      <change afterPath="$PROJECT_DIR$/src/renderer/assets/images/avatar.jpg" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/renderer/assets/less/admin.less" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/utils/storageUtils.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/inspectionProfiles/Project_Default.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/inspectionProfiles/Project_Default.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/dist/electron/.gitkeep" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/dist/web/.gitkeep" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/renderer/components/Admin.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/renderer/components/Admin.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/renderer/store/mutations.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/renderer/store/mutations.js" afterDir="false" />
     </list>
     <ignored path="$PROJECT_DIR$/dist/" />
     <ignored path="$PROJECT_DIR$/.tmp/" />
@@ -17,7 +21,48 @@
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
   <component name="FileEditorManager">
-    <leaf />
+    <leaf>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/renderer/components/Admin.vue">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="231">
+              <caret line="35" column="41" selection-start-line="35" selection-start-column="41" selection-end-line="35" selection-end-column="41" />
+              <folding>
+                <element signature="n#div#0;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
+                <element signature="n#script#0;n#!!top" />
+                <element signature="e#1033#1227#0" />
+                <element signature="e#1161#1185#0" />
+                <element signature="e#1182#1214#0" />
+                <element signature="e#153#315#0" />
+                <element signature="e#1186#1298#0" />
+                <element signature="n#style#0;n#!!top" />
+                <element signature="e#1471#1487#0" />
+                <element signature="e#1205#1221#0" />
+                <element signature="e#1654#1670#0" />
+                <element signature="e#1654#1670#0" />
+              </folding>
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="true">
+        <entry file="file://$PROJECT_DIR$/src/renderer/assets/less/admin.less">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="424">
+              <caret line="91" column="31" selection-start-line="91" selection-start-column="31" selection-end-line="91" selection-end-column="31" />
+              <folding>
+                <element signature="e#126#136#0" />
+                <element signature="e#281#295#0" />
+                <element signature="e#385#403#0" />
+                <element signature="e#713#735#0" />
+                <element signature="e#646#660#0" />
+                <element signature="e#259#269#0" />
+              </folding>
+            </state>
+          </provider>
+        </entry>
+      </file>
+    </leaf>
   </component>
   <component name="FindInProjectRecents">
     <findStrings>
@@ -45,38 +90,87 @@
         <option value="$PROJECT_DIR$/src/renderer/store/state.js" />
         <option value="$PROJECT_DIR$/src/renderer/store/mutation-types.js" />
         <option value="$PROJECT_DIR$/src/renderer/store/actions.js" />
-        <option value="$PROJECT_DIR$/src/renderer/components/Admin.vue" />
-        <option value="$PROJECT_DIR$/src/renderer/store/mutations.js" />
         <option value="$PROJECT_DIR$/src/renderer/components/Login.vue" />
+        <option value="$PROJECT_DIR$/src/utils/storageUtils.js" />
+        <option value="$PROJECT_DIR$/src/renderer/store/mutations.js" />
+        <option value="$PROJECT_DIR$/src/renderer/components/Admin.vue" />
+        <option value="$PROJECT_DIR$/src/renderer/assets/less/admin.less" />
       </list>
     </option>
   </component>
-  <component name="ProjectFrameBounds" extendedState="7">
-    <option name="x" value="511" />
-    <option name="y" value="113" />
-    <option name="width" value="1100" />
-    <option name="height" value="444" />
+  <component name="ProjectFrameBounds" extendedState="6">
+    <option name="x" value="-420" />
+    <option name="y" value="19" />
+    <option name="width" value="1366" />
+    <option name="height" value="600" />
+  </component>
+  <component name="ProjectLevelVcsManager" settingsEditedManually="true">
+    <ConfirmationsSetting value="2" id="Add" />
   </component>
-  <component name="ProjectLevelVcsManager" settingsEditedManually="true" />
   <component name="ProjectView">
     <navigator proportions="" version="1">
       <foldersAlwaysOnTop value="true" />
     </navigator>
     <panes>
-      <pane id="ProjectPane" />
       <pane id="Scope" />
+      <pane id="ProjectPane">
+        <subPane>
+          <expand>
+            <path>
+              <item name="electron-app" type="b2602c69:ProjectViewProjectNode" />
+              <item name="electron-app" type="462c0819:PsiDirectoryNode" />
+            </path>
+            <path>
+              <item name="electron-app" type="b2602c69:ProjectViewProjectNode" />
+              <item name="electron-app" type="462c0819:PsiDirectoryNode" />
+              <item name="src" type="462c0819:PsiDirectoryNode" />
+            </path>
+            <path>
+              <item name="electron-app" type="b2602c69:ProjectViewProjectNode" />
+              <item name="electron-app" type="462c0819:PsiDirectoryNode" />
+              <item name="src" type="462c0819:PsiDirectoryNode" />
+              <item name="renderer" type="462c0819:PsiDirectoryNode" />
+            </path>
+            <path>
+              <item name="electron-app" type="b2602c69:ProjectViewProjectNode" />
+              <item name="electron-app" type="462c0819:PsiDirectoryNode" />
+              <item name="src" type="462c0819:PsiDirectoryNode" />
+              <item name="renderer" type="462c0819:PsiDirectoryNode" />
+              <item name="components" type="462c0819:PsiDirectoryNode" />
+            </path>
+            <path>
+              <item name="electron-app" type="b2602c69:ProjectViewProjectNode" />
+              <item name="electron-app" type="462c0819:PsiDirectoryNode" />
+              <item name="src" type="462c0819:PsiDirectoryNode" />
+              <item name="renderer" type="462c0819:PsiDirectoryNode" />
+              <item name="store" type="462c0819:PsiDirectoryNode" />
+            </path>
+            <path>
+              <item name="electron-app" type="b2602c69:ProjectViewProjectNode" />
+              <item name="electron-app" type="462c0819:PsiDirectoryNode" />
+              <item name="src" type="462c0819:PsiDirectoryNode" />
+              <item name="utils" type="462c0819:PsiDirectoryNode" />
+            </path>
+          </expand>
+          <select />
+        </subPane>
+      </pane>
     </panes>
   </component>
   <component name="PropertiesComponent">
     <property name="SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
     <property name="WebServerToolWindowFactoryState" value="false" />
-    <property name="last_opened_file_path" value="$PROJECT_DIR$/src/renderer/store" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/src" />
     <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
     <property name="nodejs_npm_path_reset_for_default_project" value="true" />
     <property name="prettierjs.PrettierConfiguration.Package" value="C:\Users\liuwei\Desktop\桌面程序\electron-app\node_modules\prettier" />
   </component>
   <component name="RecentsManager">
+    <key name="MoveFile.RECENT_KEYS">
+      <recent name="C:\Users\liuwei\Desktop\桌面程序\electron-app\src\renderer\assets\images" />
+    </key>
     <key name="CopyFile.RECENT_KEYS">
+      <recent name="C:\Users\liuwei\Desktop\桌面程序\electron-app\src" />
       <recent name="C:\Users\liuwei\Desktop\桌面程序\electron-app\src\renderer\store" />
       <recent name="C:\Users\liuwei\Desktop\桌面程序\electron-app\src\renderer\assets\images" />
     </key>
@@ -108,11 +202,12 @@
       <workItem from="1585534550581" duration="672000" />
       <workItem from="1585535256793" duration="1910000" />
       <workItem from="1585538120533" duration="57000" />
+      <workItem from="1585541623809" duration="16362000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="12109000" />
+    <option name="totallyTimeSpent" value="28471000" />
   </component>
   <component name="TodoView">
     <todo-panel id="selected-file">
@@ -124,9 +219,10 @@
     </todo-panel>
   </component>
   <component name="ToolWindowManager">
-    <frame x="-8" y="-8" width="1936" height="1056" extended-state="7" />
+    <frame x="-8" y="-8" width="1936" height="1056" extended-state="6" />
+    <editor active="true" />
     <layout>
-      <window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.15542677" />
+      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.15542677" />
       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
       <window_info id="npm" order="2" side_tool="true" />
       <window_info id="Favorites" order="3" side_tool="true" />
@@ -139,8 +235,8 @@
       <window_info anchor="bottom" id="TODO" order="6" weight="0.32910052" />
       <window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
       <window_info anchor="bottom" id="Version Control" order="8" />
-      <window_info anchor="bottom" id="Event Log" order="9" side_tool="true" />
-      <window_info anchor="bottom" id="Terminal" order="10" weight="0.5989418" />
+      <window_info anchor="bottom" id="Event Log" order="9" side_tool="true" weight="0.32910052" />
+      <window_info anchor="bottom" id="Terminal" order="10" weight="0.35661376" />
       <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
       <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
       <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
@@ -157,13 +253,6 @@
     <entry file="file://$PROJECT_DIR$/src/renderer/assets/images/bg.jpg">
       <provider selected="true" editor-type-id="images" />
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/renderer/assets/less/login.less">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="84">
-          <caret line="4" column="16" lean-forward="true" selection-start-line="4" selection-start-column="16" selection-end-line="4" selection-end-column="16" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/build/icons/256x256.png">
       <provider selected="true" editor-type-id="images" />
     </entry>
@@ -184,40 +273,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/renderer/components/Admin.vue">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="357">
-          <caret line="17" column="9" lean-forward="true" selection-start-line="17" selection-start-column="9" selection-end-line="17" selection-end-column="9" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/renderer/App.vue">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="252">
-          <caret line="12" column="7" lean-forward="true" selection-start-line="12" selection-start-column="7" selection-end-line="12" selection-end-column="7" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/renderer/store/state.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="21">
-          <caret line="1" column="16" selection-start-line="1" selection-start-column="16" selection-end-line="1" selection-end-column="16" />
-          <folding>
-            <element signature="n#!!doc" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/renderer/store/mutations.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="294">
-          <caret line="14" selection-start-line="14" selection-end-line="14" />
-          <folding>
-            <element signature="n#!!doc" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/src/renderer/store/mutation-types.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="42">
@@ -228,17 +283,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/renderer/store/index.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="378">
-          <caret line="18" column="2" selection-start-line="18" selection-start-column="2" selection-end-line="18" selection-end-column="2" />
-          <folding>
-            <element signature="n#!!doc" expanded="true" />
-            <element signature="e#25#46#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/src/renderer/store/getters.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="378">
@@ -276,30 +320,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/renderer/components/Login.vue">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="42">
-          <caret line="2" column="22" lean-forward="true" selection-start-line="2" selection-start-column="22" selection-end-line="2" selection-end-column="22" />
-          <folding>
-            <element signature="n#header#0;n#div#0;n#template#0;n#!!top" />
-            <element signature="n#section#0;n#div#0;n#template#0;n#!!top" />
-            <element signature="n#el-form#0;n#section#0;n#div#0;n#template#0;n#!!top" />
-            <element signature="n#el-form-item#0;n#el-form#0;n#section#0;n#div#0;n#template#0;n#!!top" />
-            <element signature="n#el-form-item#1;n#el-form#0;n#section#0;n#div#0;n#template#0;n#!!top" />
-            <element signature="n#el-form-item#2;n#el-form#0;n#section#0;n#div#0;n#template#0;n#!!top" />
-            <element signature="e#1178#1299#0" />
-            <element signature="e#1208#1285#0" />
-            <element signature="e#1364#1482#0" />
-            <element signature="e#1400#1468#0" />
-            <element signature="e#1530#1617#0" />
-            <element signature="e#1642#1913#0" />
-            <element signature="e#1674#1767#0" />
-            <element signature="e#1799#1895#0" />
-            <element signature="n#style#0;n#!!top" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/.gitignore">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="105">
@@ -356,5 +376,121 @@
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/src/renderer/assets/less/login.less">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="84">
+          <caret line="4" column="16" lean-forward="true" selection-start-line="4" selection-start-column="16" selection-end-line="4" selection-end-column="16" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/renderer/App.vue">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="252">
+          <caret line="12" column="7" selection-start-line="12" selection-start-column="7" selection-end-line="12" selection-end-column="7" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/utils/storageUtils.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="42">
+          <caret line="2" column="16" lean-forward="true" selection-start-line="2" selection-start-column="16" selection-end-line="2" selection-end-column="16" />
+          <folding>
+            <element signature="n#!!doc" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/renderer/store/mutations.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="189">
+          <caret line="9" column="31" lean-forward="true" selection-start-line="9" selection-start-column="31" selection-end-line="9" selection-end-column="31" />
+          <folding>
+            <element signature="n#!!doc" expanded="true" />
+            <element signature="e#25#78#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/renderer/store/index.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="294">
+          <caret line="14" column="7" selection-start-line="14" selection-start-column="2" selection-end-line="14" selection-end-column="7" />
+          <folding>
+            <element signature="n#!!doc" expanded="true" />
+            <element signature="e#25#46#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/renderer/components/Login.vue">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="-71">
+          <caret line="23" column="11" lean-forward="true" selection-start-line="23" selection-start-column="11" selection-end-line="23" selection-end-column="11" />
+          <folding>
+            <element signature="n#header#0;n#div#0;n#template#0;n#!!top" />
+            <element signature="n#section#0;n#div#0;n#template#0;n#!!top" />
+            <element signature="n#el-form#0;n#section#0;n#div#0;n#template#0;n#!!top" />
+            <element signature="n#el-form-item#0;n#el-form#0;n#section#0;n#div#0;n#template#0;n#!!top" />
+            <element signature="n#el-form-item#1;n#el-form#0;n#section#0;n#div#0;n#template#0;n#!!top" />
+            <element signature="n#el-form-item#2;n#el-form#0;n#section#0;n#div#0;n#template#0;n#!!top" />
+            <element signature="e#1178#1299#0" />
+            <element signature="e#1208#1285#0" />
+            <element signature="e#1364#1482#0" />
+            <element signature="e#1400#1468#0" />
+            <element signature="e#1530#1617#0" />
+            <element signature="e#1642#1913#0" />
+            <element signature="e#1674#1767#0" />
+            <element signature="e#1799#1895#0" />
+            <element signature="n#style#0;n#!!top" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/renderer/store/state.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="42">
+          <caret line="2" column="19" lean-forward="true" selection-start-line="2" selection-start-column="19" selection-end-line="2" selection-end-column="19" />
+          <folding>
+            <element signature="n#!!doc" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/renderer/components/Admin.vue">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="231">
+          <caret line="35" column="41" selection-start-line="35" selection-start-column="41" selection-end-line="35" selection-end-column="41" />
+          <folding>
+            <element signature="n#div#0;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
+            <element signature="n#script#0;n#!!top" />
+            <element signature="e#1033#1227#0" />
+            <element signature="e#1161#1185#0" />
+            <element signature="e#1182#1214#0" />
+            <element signature="e#153#315#0" />
+            <element signature="e#1186#1298#0" />
+            <element signature="n#style#0;n#!!top" />
+            <element signature="e#1471#1487#0" />
+            <element signature="e#1205#1221#0" />
+            <element signature="e#1654#1670#0" />
+            <element signature="e#1654#1670#0" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/renderer/assets/less/admin.less">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="424">
+          <caret line="91" column="31" selection-start-line="91" selection-start-column="31" selection-end-line="91" selection-end-column="31" />
+          <folding>
+            <element signature="e#126#136#0" />
+            <element signature="e#281#295#0" />
+            <element signature="e#385#403#0" />
+            <element signature="e#713#735#0" />
+            <element signature="e#646#660#0" />
+            <element signature="e#259#269#0" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
   </component>
 </project>

src/renderer/assets/less/admin.less

@@ -0,0 +1,141 @@
+/*管理界面样式*/
+.container {
+  width: 100%;
+  height: 980px;
+  background-color: #333;
+  display: flex;
+
+  /*左边留白*/
+  .leftblank {
+    width: 8%;
+    height: 100%;
+  }
+
+  /*主要内容*/
+  .maincontent {
+    width: 84%;
+    height: 100%;
+    background-color: #000;
+
+    /*标题*/
+    .title {
+      width: 100%;
+      height: 60px;
+      background-color: saddlebrown;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      p {
+        font-size:30px;
+        color: deepskyblue;
+        font-weight: 900;
+      }
+    }
+
+    /*大屏管理*/
+    .screenmanage {
+      width: 100%;
+      height: 87%;
+      background-color: orange;
+      display: flex;
+
+      /*预案管理*/
+      .pre_planmanage {
+        width: 10%;
+        height: 100%;
+        background-color: darkblue;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items:center;
+
+        h2 {
+          color:#ffffff;
+        }
+
+        .el-button--small, .el-button--small.is-round {
+          font-size:16px;
+          margin-bottom:20px;
+          margin-left:0;
+        }
+      }
+
+      /*大屏控制*/
+      .bigscreen_control {
+        width: 80%;
+        height: 100%;
+        background-color: orange;
+
+        /*分屏*/
+        .split_screen {
+          width: 100%;
+          height: 70%;
+          background-color: #000000;
+          box-sizing: border-box;
+          border: 4px solid skyblue;
+        }
+
+        /*控制按钮*/
+        .control_btns {
+          width: 100%;
+          height: 30%;
+          background-color: #002140;
+
+          /*分屏按钮*/
+          .split_btns {
+            width: 100%;
+            height: 50%;
+            background-color: orange;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+          }
+
+          /*其他按钮*/
+          .other_btns {
+            width: 100%;
+            height: 50%;
+            background-color: plum;
+          }
+        }
+      }
+
+      /*信号源列表*/
+      .signal_source {
+        width: 20%;
+        height: 100%;
+        background-color: green;
+      }
+
+    }
+
+    /*底部功能菜单*/
+    .footmenu {
+      width: 100%;
+      height: 66px;
+      background-color: saddlebrown;
+    }
+  }
+
+  /*右边留白*/
+  .rightblank {
+    width: 8%;
+    height: 100%;
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/renderer/components/Admin.vue

@@ -1,13 +1,76 @@
 <!--管理界面-->
 <template>
-    <div>
-        这是管理界面
-        <el-button type="primary" @click="logout" size="mini">退出</el-button>
+    <div class="container">
+        <div class="leftblank">
+            <img class="avator" src="../assets/images/avatar.jpg" alt="头像">
+            <div class="userinfo">
+                <p>{{user.username}}</p>
+                <el-link type="primary" @click="logout" :underline="false">退出</el-link>
+            </div>
+        </div>
+        <div class="maincontent">
+            <div class="title">
+                <p>分布式视频管理系统</p>
+            </div>
+            <div class="screenmanage">
+                <div class="pre_planmanage">
+                    <h2>预案管理</h2>
+                    <el-button type="primary" size="small">添加信号源</el-button>
+                    <el-button type="primary" size="small">设置背景</el-button>
+                    <el-button type="primary" size="small">新建预案</el-button>
+                    <el-button type="primary" size="small">加载预案</el-button>
+                    <el-button type="primary" size="small">跑马灯</el-button>
+                    <el-button type="primary" size="small">播放器测试</el-button>
+                    <el-button type="primary" size="small">send</el-button>
+                    <el-button type="primary" size="small">dummy</el-button>
+                    <el-button type="primary" size="small">clear device</el-button>
+                    <el-button type="primary" size="small">rebuild DB</el-button>
+                </div>
+                <div class="bigscreen_control">
+                    <div class="split_screen">
+
+                    </div>
+
+                    <div class="control_btns">
+                        <!--分屏按钮-->
+                        <div class="split_btns">
+                            <el-button type="success">自由屏</el-button>
+                            <el-button type="success">四分屏</el-button>
+                            <el-button type="success">九分屏</el-button>
+                            <el-button type="success">十六分屏</el-button>
+                            <el-button type="success">清屏</el-button>
+                        </div>
+
+                        <!--其他按钮-->
+                        <div class="other_btns">
+
+                        </div>
+                    </div>
+                </div>
+                <div class="signal_source">
+
+                </div>
+            </div>
+            <div class="footmenu">
+
+            </div>
+        </div>
+        <div class="rightblank">
+
+        </div>
     </div>
 </template>
 
 <script>
+    import '../assets/less/admin.less'
+    import storageUtils from "../../utils/storageUtils"
+
     export default {
+        data() {
+            return {
+                user:storageUtils.getUser()
+            }
+        },
         methods: {
             logout() {
                 this.$router.replace('/login')
@@ -18,5 +81,21 @@
 </script>
 
 <style>
-
+    .leftblank {
+        display: flex;
+    }
+    .avator {
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        padding:15px;
+        cursor: pointer;
+    }
+    .userinfo {
+        padding-left:4px;
+    }
+    .userinfo p {
+        color:#fff;
+        margin-bottom:10px;
+    }
 </style>

src/renderer/store/mutations.js

@@ -1,14 +1,18 @@
 /*包含n个用于直接更新状态的方法的对象模块*/
 import {SAVE_USER,RESET_USER} from './mutation-types'
 
+import storageUtils from "../../utils/storageUtils"
+
 export default {
   // 保存用户信息
-  [SAVE_USER] (state, {user}) {  // 方法名不是REQ_LOGIN, 而是req_login
+  [SAVE_USER] (state, {user}) {  // 方法名不是SAVE_USER, 而是save_user
     state.user = user
+    storageUtils.saveUser(user)
   },
 
   // 重置用户信息
   [RESET_USER] (state) {
     state.user = {}
+    storageUtils.removeUser()
   }
 }

src/utils/storageUtils.js

@@ -0,0 +1,16 @@
+/*向local中存储数据的工具模块*/
+const USER_KEY = 'user_key'
+export default {
+  /*获取用户*/
+  getUser () {
+    return JSON.parse(localStorage.getItem(USER_KEY) || '{}')
+  },
+  /*保存用户*/
+  saveUser(user) {
+    localStorage.setItem(USER_KEY, JSON.stringify(user))
+  },
+  /*删除用户*/
+  removeUser() {
+    localStorage.removeItem(USER_KEY)
+  }
+}