improve ux

spug_api/apps/app/models.py

@@ -56,6 +56,7 @@ class Deploy(models.Model, ModelMixin):
 
     def to_dict(self, *args, **kwargs):
         deploy = super().to_dict(*args, **kwargs)
+        deploy['app_key'] = self.app_key if hasattr(self, 'app_key') else None
         deploy['app_name'] = self.app_name if hasattr(self, 'app_name') else None
         deploy['host_ids'] = json.loads(self.host_ids)
         deploy['rst_notify'] = json.loads(self.rst_notify)

spug_api/apps/app/views.py

@@ -97,7 +97,9 @@ class DeployView(View):
             perms = request.user.deploy_perms
             form.app_id__in = perms['apps']
             form.env_id__in = perms['envs']
-        deploys = Deploy.objects.filter(**form).annotate(app_name=F('app__name')).order_by('-app__sort_id')
+        deploys = Deploy.objects.filter(**form) \
+            .annotate(app_name=F('app__name'), app_key=F('app__key')) \
+            .order_by('-app__sort_id')
         return json_response(deploys)
 
     def post(self, request):

spug_web/src/libs/functools.js

@@ -36,6 +36,18 @@ export function hasHostPermission(id) {
   return isSuper || hostPerms.includes(id)
 }
 
+export function includes(s, key) {
+  key = key.toLowerCase();
+  if (Array.isArray(s)) {
+    for (let i of s) {
+      if (i && i.toLowerCase().includes(key)) return true
+    }
+    return false
+  } else {
+    return s && s.toLowerCase().includes(key)
+  }
+}
+
 // 清理输入的命令中包含的\r符号
 export function cleanCommand(text) {
   return text ? text.replace(/\r\n/g, '\n') : ''

spug_web/src/pages/deploy/request/SelectApp.js

@@ -6,7 +6,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { observer } from 'mobx-react';
-import { Modal, Button, Menu, Spin, Icon, Input, Tooltip } from 'antd';
+import { Modal, Menu, Spin, Icon, Input } from 'antd';
+import { includes } from 'libs';
 import store from './store';
 import styles from './index.module.css';
 import envStore from 'pages/config/environment/store';
@@ -61,7 +62,7 @@ class SelectApp extends React.Component {
     const {env_id} = this.state;
     let records = store.deploys.filter(x => x.env_id === Number(env_id));
     if (this.state.search) {
-      records = records.filter(x => x['app_name'].toLowerCase().includes(this.state.search.toLowerCase()))
+      records = records.filter(x => includes(x['app_name'], this.state.search) || includes(x['app_key'], this.state.search))
     }
     return (
       <Modal
@@ -89,25 +90,24 @@ class SelectApp extends React.Component {
             <Spin spinning={store.isLoading}>
               <div className={styles.title}>
                 <div>{lds.get(envStore.idMap, `${env_id}.name`)}</div>
-                <Input.Search
+                <Input
                   allowClear
                   style={{width: 200}}
-                  placeholder="请输入快速搜应用"
+                  placeholder="请输入快速检索应用"
+                  prefix={<Icon type="search" style={{color: 'rgba(0, 0, 0, 0.25)'}}/>}
                   onChange={e => this.setState({search: e.target.value})}/>
               </div>
-              {records.map(item => (
-                <Tooltip key={item.id} title={store.refs[item.id] ? item['app_name'] : null}>
-                  <Button type="primary" className={styles.appBlock} onClick={() => this.handleClick(item)}>
-                    <div ref={el => this.handleRef(el, item.id)}
-                         style={{width: 135, overflow: 'hidden', textOverflow: 'ellipsis'}}>
-                      <Icon type={item.extend === '1' ? 'ordered-list' : 'build'}
-                            style={{marginRight: 10}}/>{item['app_name']}
-                    </div>
-                  </Button>
-                </Tooltip>
-              ))}
-              {records.length === 0 &&
-              <div className={styles.tips}>该环境下还没有可发布的应用哦，快去<Link to="/deploy/app">应用管理</Link>创建应用发布配置吧。</div>}
+              <div style={{height: 540, overflow: 'auto'}}>
+                {records.map(item => (
+                  <div key={item.id} className={styles.appItem} onClick={() => this.handleClick(item)}>
+                    {item.extend === '1' ? <Icon type="ordered-list"/> : <Icon type="build"/>}
+                    <div className={styles.body}>{item.app_name}</div>
+                    <div style={{color: '#999'}}>{item.app_key}</div>
+                  </div>
+                ))}
+                {records.length === 0 &&
+                <div className={styles.tips}>该环境下还没有可发布或构建的应用哦，快去<Link to="/deploy/app">应用管理</Link>创建应用发布配置吧。</div>}
+              </div>
             </Spin>
           </div>
         </div>

spug_web/src/pages/deploy/request/index.module.css

@@ -17,19 +17,38 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 12px;
+    margin-bottom: 24px;
     color: rgba(0, 0, 0, .85);
     font-weight: 500;
     font-size: 20px;
     line-height: 28px;
 }
 
-.appBlock {
-    margin-top: 20px;
-    width: 165px;
-    height: 60px;
-    font-size: 18px;
-    margin-right: 20px;
+ .appItem {
+    width: 560px;
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    margin-bottom: 8px;
+    background: #fafafa;
+    border-radius: 4px;
+ }
+
+.appItem :global(.anticon) {
+    color: #1890ff;
+    margin-right: 16px;
+}
+
+.appItem .body {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.appItem:hover {
+    cursor: pointer;
+    background: #e6f7ff;
 }
 
 .tips {