improve ux

spug_api/apps/app/models.py

@@ -59,6 +59,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

@@ -90,7 +90,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/components/AppSelector.js

@@ -6,8 +6,8 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { observer } from 'mobx-react';
-import { Modal, Button, Menu, Spin, Input, Tooltip } from 'antd';
+import { Modal, Menu, Spin, Input } from 'antd';
-import { OrderedListOutlined, BuildOutlined } from '@ant-design/icons';
+import { OrderedListOutlined, BuildOutlined, SearchOutlined } from '@ant-design/icons';
 import { includes, http } from 'libs';
 import styles from './index.module.less';
 import envStore from 'pages/config/environment/store';
@@ -15,7 +15,6 @@ import lds from 'lodash';
 
 export default observer(function AppSelector(props) {
   const [fetching, setFetching] = useState(false);
-  const [refs, setRefs] = useState({});
   const [env_id, setEnvId] = useState();
   const [search, setSearch] = useState();
   const [deploys, setDeploys] = useState([]);
@@ -38,17 +37,8 @@ export default observer(function AppSelector(props) {
     }
   }
 
-  function handleRef(el, id) {
-    if (el && !refs.hasOwnProperty(id)) {
-      setTimeout(() => {
-        refs[id] = el.scrollWidth > el.clientWidth;
-        setRefs({...refs})
-      }, 200)
-    }
-  }
-
   let records = deploys.filter(x => x.env_id === Number(env_id));
-  if (search) records = records.filter(x => includes(x['app_name'], search));
+  if (search) records = records.filter(x => includes(x['app_name'], search) || includes(x['app_key'], search));
   if (props.filter) records = records.filter(x => props.filter(x));
   return (
     <Modal
@@ -76,25 +66,24 @@ export default observer(function AppSelector(props) {
           <Spin spinning={fetching}>
             <div className={styles.title}>
               <div>{lds.get(envStore.idMap, `${env_id}.name`)}</div>
-              <Input.Search
+              <Input
                 allowClear
                 style={{width: 200}}
-                placeholder="请输入快速搜应用"
+                placeholder="请输入快速检索应用"
+                prefix={<SearchOutlined style={{color: 'rgba(0, 0, 0, 0.25)'}}/>}
                 onChange={e => setSearch(e.target.value)}/>
             </div>
+            <div style={{height: 540, overflow: 'auto'}}>
               {records.map(item => (
-              <Tooltip key={item.id} title={refs[item.id] ? item['app_name'] : null}>
+                <div key={item.id} className={styles.appItem} onClick={() => props.onSelect(item)}>
-                <Button type="primary" className={styles.appBlock} onClick={() => props.onSelect(item)}>
-                  <div ref={el => handleRef(el, item.id)}
-                       style={{width: 135, overflow: 'hidden', textOverflow: 'ellipsis'}}>
                   {item.extend === '1' ? <OrderedListOutlined/> : <BuildOutlined/>}
-                    <span style={{marginLeft: 8}}>{item.app_name}</span>
+                  <div className={styles.body}>{item.app_name}</div>
+                  <div style={{color: '#999'}}>{item.app_key}</div>
                 </div>
-                </Button>
-              </Tooltip>
               ))}
               {records.length === 0 &&
               <div className={styles.tips}>该环境下还没有可发布或构建的应用哦，快去<Link to="/deploy/app">应用管理</Link>创建应用发布配置吧。</div>}
+            </div>
           </Spin>
         </div>
       </div>

spug_web/src/components/index.module.less

@@ -173,19 +173,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 {
+  .appItem {
-    margin-top: 20px;
+    width: 560px;
-    width: 165px;
+    display: flex;
-    height: 60px;
+    align-items: center;
-    font-size: 18px;
+    padding: 12px 16px;
-    margin-right: 20px;
+    margin-bottom: 8px;
+    background: #fafafa;
+    border-radius: 2px;
+
+    :global(.anticon) {
+      color: #1890ff;
+      margin-right: 16px;
+    }
+
+    .body {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .appItem:hover {
+    cursor: pointer;
+    background: #e6f7ff;
   }
 
   .tips {