Modify admin management menu

options/locale/locale_en-US.ini

@@ -2962,6 +2962,13 @@ notices.desc = Description
 notices.op = Op.
 notices.delete_success = The system notices have been deleted.
 
+user_management = User Management
+resource_management = Resource Management
+resource_pool = Resource Pool(queue)
+resource_price = Resource Price
+application_scenario = Application Scenario
+system_configuration = System Configuration
+
 [action]
 create_repo = created repository <a href="%s">%s</a>
 rename_repo = renamed repository from <code>%[1]s</code> to <a href="%[2]s">%[3]s</a>

options/locale/locale_zh-CN.ini

@@ -2976,6 +2976,13 @@ notices.desc=提示描述
 notices.op=操作
 notices.delete_success=系统通知已被删除。
 
+user_management = 用户管理
+resource_management = 资源管理
+resource_pool = 资源池(队列)
+resource_price = 资源规格单价
+application_scenario = 应用场景
+system_configuration = 系统配置
+
 [action]
 create_repo=创建了项目 <a href="%s">%s</a>
 rename_repo=重命名项目 <code>%[1]s</code> 为 <a href="%[2]s">%[3]s</a>

templates/admin/cloudbrain/images.tmpl

@@ -13,10 +13,9 @@
 <div class="alert"></div>
 <div class="admin user">
     {{template "admin/navbar" .}}
-    <div id="images-admin">
-
-    </div>
-    
+    <div class="ui container">
+        <div id="images-admin"></div>
+    </div>    
 </div>
 <!-- 确认模态框 -->
 <div>

templates/admin/cloudbrain/list.tmpl

@@ -18,19 +18,19 @@
         data-all-compute="{{.i18n.Tr "admin.cloudbrain.all_computing_resources"}}"
         data-all-status="{{.i18n.Tr "admin.cloudbrain.all_status"}}"></div>
     {{template "admin/navbar" .}}
-    <div class="ui container" style="width: 95%;">
+    <div class="ui container">
         {{template "base/alert" .}}
-        <div class="ui grid">
-            <div class="row" style="border: 1px solid #d4d4d5;margin-top: 15px;padding-top: 0;">
+        <div class="ui grid" style="margin:0">
+            <div class="row" style="border: 1px solid #d4d4d5;margin-top: 0px;padding-top: 0;">
                 {{template "admin/cloudbrain/search" .}}
                 <div class="ui six wide column right aligned" style="margin: 1rem 0;">
                     <a class="ui compact blue basic icon button" style="box-shadow: none !important; padding: 0.8em;"
                         href="/admin/cloudbrains/download"><i
                             class="ri-download-line middle aligned icon"></i>{{.i18n.Tr "admin.cloudbrain.download_report"}}</a>
                 </div>
-                <div class="ui sixteen wide column">
+                <div class="ui sixteen wide column" style="overflow-x:auto;">
                     <!-- 任务展示 -->
-                    <div class="dataset list">
+                    <div class="dataset list" style="min-width:1700px;margin-top:15px;margin-bottom:15px;">
                         <!-- 表头 -->
                         <div class="ui grid stackable" style="background: #f0f0f0;;">
                             <div class="row">
@@ -408,17 +408,16 @@
                         </div>
 
                         {{end}}
-                        {{end}}
-                        <div id="app" style="margin-top: 2rem;">
-                            <div class="center">
-                                <el-pagination background @current-change="handleCurrentChange" :current-page="page"
-                                    :page-sizes="[10]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
-                                    :total="{{.Page.Paginater.Total}}">
-                                </el-pagination>
-                            </div>
-                        </div>
+                        {{end}}                        
+                    </div>                    
+                </div>
+                <div id="app" style="margin-top: 2rem;width:100%;">
+                    <div class="center">
+                        <el-pagination background @current-change="handleCurrentChange" :current-page="page"
+                            :page-sizes="[10]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
+                            :total="{{.Page.Paginater.Total}}">
+                        </el-pagination>
                     </div>
-
                 </div>
             </div>
         </div>

templates/admin/navbar.tmpl

@@ -1,44 +1,64 @@
-<div class="ui secondary pointing tabular top attached borderless menu stackable new-menu navbar">
-	<a class="{{if .PageIsAdminDashboard}}active{{end}} item" href="{{AppSubUrl}}/admin">
-		{{.i18n.Tr "admin.dashboard"}}
-	</a>
-	<a class="{{if .PageIsAdminUsers}}active{{end}} item" href="{{AppSubUrl}}/admin/users">
-		{{.i18n.Tr "admin.users"}}
-	</a>
-	<a class="{{if .PageIsAdminOrganizations}}active{{end}} item" href="{{AppSubUrl}}/admin/orgs">
-		{{.i18n.Tr "admin.organizations"}}
-	</a>
-	<a class="{{if .PageIsAdminRepositories}}active{{end}} item" href="{{AppSubUrl}}/admin/repos">
-		{{.i18n.Tr "admin.repositories"}}
-	</a>
-	<a class="{{if .PageIsAdminDatasets}}active{{end}} item" href="{{AppSubUrl}}/admin/datasets">
-		{{.i18n.Tr "admin.datasets"}}
-	</a>
-	<a class="{{if .PageIsAdminCloudBrains}}active{{end}} item" href="{{AppSubUrl}}/admin/cloudbrains">
-		{{.i18n.Tr "repo.cloudbrain.task"}}
-	</a>
-	<a class="{{if .PageIsAdminImages}}active{{end}} item" href="{{AppSubUrl}}/admin/images">
-		{{.i18n.Tr "explore.images"}}
-	</a>
-	<a class="{{if .PageIsAdminHooks}}active{{end}} item" href="{{AppSubUrl}}/admin/hooks">
-		{{.i18n.Tr "admin.hooks"}}
-	</a>
-	<a class="{{if .PageIsAdminSystemHooks}}active{{end}} item" href="{{AppSubUrl}}/admin/system-hooks">
-		{{.i18n.Tr "admin.systemhooks"}}
-	</a>
-	<a class="{{if .PageIsAdminAuthentications}}active{{end}} item" href="{{AppSubUrl}}/admin/auths">
-		{{.i18n.Tr "admin.authentication"}}
-	</a>
-	<a class="{{if .PageIsAdminEmails}}active{{end}} item" href="{{AppSubUrl}}/admin/emails">
-		{{.i18n.Tr "admin.emails"}}
-	</a>
-	<a class="{{if .PageIsAdminConfig}}active{{end}} item" href="{{AppSubUrl}}/admin/config">
-		{{.i18n.Tr "admin.config"}}
-	</a>
-	<a class="{{if .PageIsAdminNotices}}active{{end}} item" href="{{AppSubUrl}}/admin/notices">
-		{{.i18n.Tr "admin.notices"}}
-	</a>
-	<a class="{{if .PageIsAdminMonitor}}active{{end}} item" href="{{AppSubUrl}}/admin/monitor">
-		{{.i18n.Tr "admin.monitor"}}
-	</a>
+<div class="ui secondary pointing tabular top attached borderless menu stackable new-menu navbar" style="margin-top:0">
+	<div class="item-container">
+		<a class="{{if .PageIsAdminDashboard}}active{{end}} item" href="{{AppSubUrl}}/admin">
+			{{.i18n.Tr "admin.dashboard"}}
+		</a>
+		<a class="item item-first" href="javascript:void;">
+			{{.i18n.Tr "admin.user_management"}}
+		</a>
+		<a class="{{if .PageIsAdminUsers}}active{{end}} item item-next" href="{{AppSubUrl}}/admin/users">
+			{{.i18n.Tr "admin.users"}}
+		</a>
+		<a class="{{if .PageIsAdminEmails}}active{{end}} item item-next" href="{{AppSubUrl}}/admin/emails">
+			{{.i18n.Tr "admin.emails"}}
+		</a>
+		<a class="{{if .PageIsAdminOrganizations}}active{{end}} item" href="{{AppSubUrl}}/admin/orgs">
+			{{.i18n.Tr "admin.organizations"}}
+		</a>
+		<a class="{{if .PageIsAdminRepositories}}active{{end}} item" href="{{AppSubUrl}}/admin/repos">
+			{{.i18n.Tr "admin.repositories"}}
+		</a>
+		<a class="{{if .PageIsAdminDatasets}}active{{end}} item" href="{{AppSubUrl}}/admin/datasets">
+			{{.i18n.Tr "admin.datasets"}}
+		</a>
+		<a class="{{if .PageIsAdminCloudBrains}}active{{end}} item" href="{{AppSubUrl}}/admin/cloudbrains">
+			{{.i18n.Tr "repo.cloudbrain.task"}}
+		</a>
+		<a class="{{if .PageIsAdminImages}}active{{end}} item" href="{{AppSubUrl}}/admin/images">
+			{{.i18n.Tr "explore.images"}}
+		</a>
+		<a class="item item-first" href="javascript:void;">
+			{{.i18n.Tr "admin.resource_management"}}
+		</a>
+		<a class="item item-next" href="javascript:void;">
+			{{.i18n.Tr "admin.resource_pool"}}
+		</a>
+		<a class="item item-next" href="javascript:void;">
+			{{.i18n.Tr "admin.resource_price"}}
+		</a>
+		<a class="item item-next" href="javascript:void;">
+			{{.i18n.Tr "admin.application_scenario"}}
+		</a>
+		<a class="item item-first" href="javascript:void;">
+			{{.i18n.Tr "admin.system_configuration"}}
+		</a>
+		<a class="{{if .PageIsAdminMonitor}}active{{end}} item item-next" href="{{AppSubUrl}}/admin/monitor">
+			{{.i18n.Tr "admin.monitor"}}
+		</a>
+		<a class="{{if .PageIsAdminHooks}}active{{end}} item item-next" href="{{AppSubUrl}}/admin/hooks">
+			{{.i18n.Tr "admin.hooks"}}
+		</a>
+		<a class="{{if .PageIsAdminSystemHooks}}active{{end}} item item-next" href="{{AppSubUrl}}/admin/system-hooks">
+			{{.i18n.Tr "admin.systemhooks"}}
+		</a>
+		<a class="{{if .PageIsAdminAuthentications}}active{{end}} item item-next" href="{{AppSubUrl}}/admin/auths">
+			{{.i18n.Tr "admin.authentication"}}
+		</a>
+		<a class="{{if .PageIsAdminConfig}}active{{end}} item item-next" href="{{AppSubUrl}}/admin/config">
+			{{.i18n.Tr "admin.config"}}
+		</a>
+		<a class="{{if .PageIsAdminNotices}}active{{end}} item item-next" href="{{AppSubUrl}}/admin/notices">
+			{{.i18n.Tr "admin.notices"}}
+		</a>
+	</div>
 </div>

web_src/js/components/images/adminImages.vue

@@ -1,9 +1,8 @@
 <template>
     <div>
-        <div class="ui container" style="width: 80%;">
-            <div class="ui grid">
-                <div class="row" style="border: 1px solid #d4d4d5;margin-top: 15px;padding-top: 0;">
-
+        <div class="ui container" style="width: 100% !important;padding-right: 0;">
+            <div class="ui grid" style="margin: 0 !important">
+                <div class="row" style="border: 1px solid #d4d4d5;margin-top:0px;padding-top: 0;">
                     <div class="ui attached segment">
                         <div class="ui form ignore-dirty">
                             <div class="ui fluid action input">
@@ -31,8 +30,8 @@
                     <div class="ui six wide column right aligned" style="margin: 1rem 0;">
                         <a class="ui blue small button" href="/admin/images/commit_image">创建云脑镜像</a>
                     </div>
-                    <div class="ui sixteen wide column" style="padding: 0;">
-                        <el-table :data="tableDataCustom" style="width: 100%" :header-cell-style="tableHeaderStyle">
+                    <div class="ui sixteen wide column" style="padding: 0;overflow-x: auto;">
+                        <el-table :data="tableDataCustom" style="width: 100%;min-width:1700px;" :header-cell-style="tableHeaderStyle">
                             <el-table-column label="镜像Tag" min-width="19%" align="left" prop="tag">
                                 <template slot-scope="scope">
                                     <div style="display: flex;align-items: center;">

web_src/less/_admin.less

@@ -1,5 +1,5 @@
 .admin {
-    padding-top: 15px;
+    padding-top: 15px !important;
 
     .table.segment {
         padding: 0;
@@ -75,4 +75,58 @@
         white-space: pre-wrap;
         word-wrap: break-word;
     }
+    
+    display: flex;
+    .new-menu.navbar {
+        width: 230px !important;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start !important;
+        border-bottom: none !important;        
+        background-color: transparent !important;
+        .item-container {
+            display: flex;
+            flex-direction: column;
+            padding-top: 8px;
+            padding-bottom: 8px;
+            margin-left: 10px !important;
+            margin-right: 10px !important;
+            border: 1px solid #d4d4d5;
+            border-radius: 4px;
+            box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
+            background-color: #fafafa !important;
+            .item {
+                align-self: flex-start !important;
+                width: 100%;
+                padding-left: 20px;
+                &.active {                    
+                    color: #40a9ff !important;
+                    border-right: 4px solid #40a9ff;
+                    border-radius: 0 !important;
+                    border-bottom: none !important;                    
+                    background-color: rgb(255, 255, 255);
+                }
+                &:hover {                    
+                    background-color: #ffffff !important;
+                }
+                &:active {
+                    border-color: transparent !important;
+                }
+                &.item-next {                    
+                    padding-left: 45px;
+                }
+                &.item-first {                    
+                    color: rgba(0,0,0,.87);
+                    &:hover {                    
+                        background-color: transparent !important;
+                    }
+                }
+            }
+        }
+
+    }
+    >.ui.container {
+        flex: 1 !important;
+        padding-right: 10px;
+    }
 }