feat: improve ui details

packages/app/src/app.ts

@@ -1,3 +1,4 @@
+import './css_browser_selector';
 import { RequestConfig, request as umiRequest, history } from 'umi';
 
 export const request: RequestConfig = {

packages/app/src/components/actions/Create.tsx

@@ -1,6 +1,7 @@
 import React, { useRef } from 'react';
 import { Button } from 'antd';
 import ViewFactory from '@/components/views';
+import { PlusOutlined } from '@ant-design/icons';
 
 export function Create(props) {
   console.log(props);
@@ -31,7 +32,7 @@ export function Create(props) {
         viewName={viewName}
         {...params}
       />
-      <Button type={'primary'} onClick={() => {
+      <Button icon={<PlusOutlined />} type={'primary'} onClick={() => {
         drawerRef.current.setVisible(true);
       }}>{title}</Button>
     </>

packages/app/src/components/actions/Destroy.tsx

@@ -1,6 +1,7 @@
 import React, { useRef } from 'react';
 import { Button, Popconfirm } from 'antd';
 import ViewFactory from '@/components/views';
+import { DeleteOutlined } from '@ant-design/icons';
 
 export function Destroy(props) {
   console.log(props);
@@ -13,7 +14,7 @@ export function Destroy(props) {
           console.log('destroy', onTrigger);
           onTrigger && onTrigger();
         }}>
-        <Button type={'primary'}>{title}</Button>
+        <Button icon={<DeleteOutlined />} type={'primary'} danger>{title}</Button>
       </Popconfirm>
     </>
   )

packages/app/src/components/actions/Filter.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { Button, Popover } from 'antd';
 import ViewFactory from '@/components/views';
+import { FilterOutlined } from '@ant-design/icons';
 
 export function Filter(props) {
   console.log(props);
@@ -25,7 +26,7 @@ export function Filter(props) {
   return (
     <>
       <Popover
-        title="设置筛选"
+        // title="设置筛选"
         trigger="click"
         visible={visible}
         placement={'bottomLeft'}
@@ -50,7 +51,7 @@ export function Filter(props) {
           </>
         )}
       >
-        <Button type={'primary'} onClick={() => {
+        <Button icon={<FilterOutlined />} onClick={() => {
           setVisible(true);
         }}>{title}</Button>
       </Popover>

packages/app/src/components/actions/Update.tsx

@@ -1,6 +1,7 @@
 import React, { useRef } from 'react';
 import { Button } from 'antd';
 import ViewFactory from '@/components/views';
+import { EditOutlined } from '@ant-design/icons';
 
 export function Update(props) {
   const { title, viewName, resourceName, collection_name } = props.schema;
@@ -28,7 +29,7 @@ export function Update(props) {
         mode={'update'}
         {...params}
       />
-      <Button type={'primary'} onClick={() => {
+      <Button icon={<EditOutlined />} type={'primary'} onClick={() => {
         drawerRef.current.setVisible(true);
         drawerRef.current.getData(item.itemId || resourceKey);
       }}>{title}</Button>

packages/app/src/components/actions/index.tsx

@@ -4,7 +4,8 @@ import Create from './Create';
 import Update from './Update';
 import Destroy from './Destroy';
 import Filter from './Filter';
-import { Space } from 'antd';
+// import { Space } from 'antd';
+import './style.less';
 
 const ACTIONS = new Map<string, any>();
 
@@ -33,16 +34,18 @@ export function Actions(props) {
   const { onTrigger = {}, style, schema, actions = [], ...restProps } = props;
   console.log(onTrigger);
   return actions.length > 0 && (
-    <Space style={style}>
+    <div className={'action-buttons'} style={style}>
       {actions.map(action => (
-        <Action
-          {...restProps}
-          view={schema}
-          schema={action}
-          onTrigger={onTrigger[action.name]}
-        />
+        <div className={`${action.name}-action-button action-button`}>
+          <Action
+            {...restProps}
+            view={schema}
+            schema={action}
+            onTrigger={onTrigger[action.name]}
+          />
+        </div>
       ))}
-    </Space>
+    </div>
   );
 }
 

packages/app/src/components/actions/style.less

@@ -0,0 +1,14 @@
+.action-buttons {
+  display: flex;
+  justify-content: flex-end;
+  .action-button {
+    margin-right: 8px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  .filter-action-button {
+    position: absolute;
+    left: 24px;
+  }
+}

packages/app/src/components/form.fields/filter/style.less

@@ -1,3 +1,3 @@
 .filter-remove-link {
-  color: inherit;
+  color:#d9d9d9;
 }

packages/app/src/components/form.fields/sub-table/Table.tsx

@@ -77,6 +77,7 @@ export default function Table(props: SimpleTableProps) {
         console.log(newVaules);
       }} ref={drawerRef}/>
       <AntdTable
+        size={'middle'}
         rowKey={rowKey}
         // loading={loading}
         columns={fields2columns(schema.fields||[])}

packages/app/src/components/pages/CollectionLoader/style.less

@@ -34,7 +34,7 @@
 }
 
 .collection-content {
-  margin: 24px;
+  margin: 16px;
 }
 
 // .ant-page-header.has-footer {

packages/app/src/components/pages/TopMenuLayout/style.less

@@ -4,7 +4,7 @@
   font-size: 18px;
   letter-spacing: 2px;
   font-weight: 300;
-  padding: 6px 20px 0 20px;
+  padding: 6px 25px 0 25px;
 }
 
 body {

packages/app/src/components/views/Details.tsx

@@ -38,10 +38,10 @@ export function Details(props: any) {
         actions={actions}
       />
       {loading ? <Spin/> : (
-        <Descriptions bordered column={1}>
+        <Descriptions size={'middle'} bordered column={1}>
           {fields.map((field: any) => {
             return (
-              <Descriptions.Item labelStyle={{minWidth: 200, maxWidth: 300, width: 300}} label={field.title||field.name}>
+              <Descriptions.Item label={field.title||field.name}>
                 <Field viewType={'descriptions'} schema={field} value={get(data, field.name)}/>
               </Descriptions.Item>
             )

packages/app/src/components/views/Field/index.tsx

@@ -70,9 +70,12 @@ export function BooleanField(props: any) {
 }
 
 export function NumberField(props: any) {
-  const { schema: { precision }, value } = props;
+  const { schema: { precision = 0 }, value } = props;
+  if (!isNumber(value)) {
+    return null;
+  }
   return (
-    <>{value}</>
+    <div className={'number-field'}>{new Intl.NumberFormat().format(value)}</div>
   );
 }
 
@@ -87,12 +90,12 @@ export function isNumber(num) {
 };
 
 export function PercentField(props: any) {
-  const { schema: { precision }, value } = props;
+  const { schema: { precision = 0 }, value } = props;
   if (!isNumber(value)) {
     return null;
   }
   return (
-    <>{value}%</>
+    <div className={'percent-field'}>{new Intl.NumberFormat().format(value)}%</div>
   );
 }
 

packages/app/src/components/views/Field/style.less

@@ -5,4 +5,11 @@
   &:last-child::after {
     content: '';
   }
-}
+}
+
+.ant-table-cell {
+  > .percent-field,
+  > .number-field {
+    text-align: right;
+  }
+}

packages/app/src/components/views/SimpleTable.tsx

@@ -111,6 +111,7 @@ export function SimpleTable(props: SimpleTableProps) {
         }}
       />
       <AntdTable
+        size={'middle'}
         rowKey={rowKey}
         loading={loading}
         columns={fields2columns(fields)}
@@ -149,7 +150,7 @@ export function SimpleTable(props: SimpleTableProps) {
       />
       {paginated && (
         <div className={'table-pagination'}>
-          <Pagination {...pagination} showQuickJumper showSizeChanger size={'default'}/>
+          <Pagination {...pagination} showQuickJumper showSizeChanger size={'small'}/>
         </div>
       )}
     </Card>

packages/app/src/components/views/Table.tsx

@@ -104,6 +104,7 @@ export function Table(props: TableProps) {
         }}
       />
       <AntdTable 
+        size={'middle'}
         rowKey={rowKey}
         columns={fields2columns(fields)}
         dataSource={data?.list||(data as any)}
@@ -146,7 +147,7 @@ export function Table(props: TableProps) {
       />
       {paginated && (
         <div className={'table-pagination'}>
-          <Pagination {...pagination} showQuickJumper showSizeChanger size={'default'}/>
+          <Pagination {...pagination} showQuickJumper showSizeChanger size={'small'}/>
         </div>
       )}
     </Card>

packages/app/src/components/views/style.less

@@ -10,4 +10,15 @@
   ul {
     float: right;
   }
+}
+
+
+.ant-descriptions-item-label {
+  font-weight: 500;
+  text-align: right;
+  width: 200px;
+}
+
+.ant-form-item-label {
+  font-weight: 500;
 }

packages/app/src/css_browser_selector.js

@@ -0,0 +1,163 @@
+/*
+CSS Browser Selector 0.6.3
+Originally written by Rafael Lima (http://rafael.adm.br)
+http://rafael.adm.br/css_browser_selector
+License: http://creativecommons.org/licenses/by/2.5/
+Co-maintained by:
+https://github.com/verbatim/css_browser_selector
+*/
+
+showLog=true;
+function log(m) {if ( window.console && showLog ) {console.log(m); }  }
+
+function css_browser_selector(u) {
+	var	uaInfo = {},
+		screens = [320, 480, 640, 768, 1024, 1152, 1280, 1440, 1680, 1920, 2560],
+		allScreens = screens.length,
+		ua=u.toLowerCase(),
+		is=function(t) { return RegExp(t,"i").test(ua);  },
+		version = function(p,n) 
+			{ 
+			n=n.replace(".","_"); var i = n.indexOf('_'),  ver=""; 
+			while (i>0) {ver += " "+ p+n.substring(0,i);i = n.indexOf('_', i+1);} 
+			ver += " "+p+n; return ver; 
+			},
+		g='gecko',
+		w='webkit',
+		c='chrome',
+		f='firefox',
+		s='safari',
+		o='opera',
+		m='mobile',
+		a='android',
+		bb='blackberry',
+		lang='lang_',
+		dv='device_',
+		html=document.documentElement,
+		b=	[
+		
+			// browser
+			((!(/opera|webtv/i.test(ua))&&/msie\s(\d+)/.test(ua)||(/trident\/.*rv:([0-9]{1,}[\.0-9]{0,})/.test(ua))))?('ie ie'+(/trident\/4\.0/.test(ua) ? '8' : RegExp.$1 == '11.0'?'11':RegExp.$1))
+			:is('firefox/')?g+ " " + f+(/firefox\/((\d+)(\.(\d+))(\.\d+)*)/.test(ua)?' '+f+RegExp.$2 + ' '+f+RegExp.$2+"_"+RegExp.$4:'')	
+			:is('gecko/')?g
+			:is('opera')?o+(/version\/((\d+)(\.(\d+))(\.\d+)*)/.test(ua)?' '+o+RegExp.$2 + ' '+o+RegExp.$2+"_"+RegExp.$4 : (/opera(\s|\/)(\d+)\.(\d+)/.test(ua)?' '+o+RegExp.$2+" "+o+RegExp.$2+"_"+RegExp.$3:''))
+			:is('konqueror')?'konqueror'
+	
+			:is('blackberry') ? 
+				( bb + 
+					( /Version\/(\d+)(\.(\d+)+)/i.test(ua)
+						? " " + bb+ RegExp.$1 + " "+bb+ RegExp.$1+RegExp.$2.replace('.','_')
+						: (/Blackberry ?(([0-9]+)([a-z]?))[\/|;]/gi.test(ua) 
+							? ' ' +bb+RegExp.$2 + (RegExp.$3?' ' +bb+RegExp.$2+RegExp.$3:'')
+							: '')
+					)
+				) // blackberry
+	
+			:is('android') ? 
+				(  a +
+					( /Version\/(\d+)(\.(\d+))+/i.test(ua)
+						? " " + a+ RegExp.$1 + " "+a+ RegExp.$1+RegExp.$2.replace('.','_')
+						: '')
+					+ (/Android (.+); (.+) Build/i.test(ua)
+						? ' '+dv+( (RegExp.$2).replace(/ /g,"_") ).replace(/-/g,"_")
+						:''	)
+				) //android
+	
+			:is('chrome')?w+   ' '+c+(/chrome\/((\d+)(\.(\d+))(\.\d+)*)/.test(ua)?' '+c+RegExp.$2 +((RegExp.$4>0) ? ' '+c+RegExp.$2+"_"+RegExp.$4:''):'')	
+			
+			:is('iron')?w+' iron'
+			
+			:is('applewebkit/') ? 
+				( w+ ' '+ s + 
+					( /version\/((\d+)(\.(\d+))(\.\d+)*)/.test(ua)
+						?  ' '+ s +RegExp.$2 + " "+s+ RegExp.$2+RegExp.$3.replace('.','_')
+						:  ( / Safari\/(\d+)/i.test(ua) 
+							? 
+							( (RegExp.$1=="419" || RegExp.$1=="417" || RegExp.$1=="416" || RegExp.$1=="412" ) ? ' '+ s + '2_0' 
+								: RegExp.$1=="312" ? ' '+ s + '1_3'
+								: RegExp.$1=="125" ? ' '+ s + '1_2'
+								: RegExp.$1=="85" ? ' '+ s + '1_0'
+								: '' )
+							:'')
+						)
+				) //applewebkit	
+		
+			:is('mozilla/')?g
+			:''
+			
+			// mobile
+			,is("android|mobi|mobile|j2me|iphone|ipod|ipad|blackberry|playbook|kindle|silk")?m:''
+			
+			// os/platform
+			,is('j2me')?'j2me'
+			:is('ipad|ipod|iphone')?  
+				( 
+					(
+						/CPU( iPhone)? OS (\d+[_|\.]\d+([_|\.]\d+)*)/i.test(ua)  ?
+						'ios' + version('ios',RegExp.$2) : ''
+					) + ' ' + ( /(ip(ad|od|hone))/gi.test(ua) ?	RegExp.$1 : "" )
+				) //'iphone'
+			//:is('ipod')?'ipod'
+			//:is('ipad')?'ipad'
+			:is('playbook')?'playbook'
+			:is('kindle|silk')?'kindle'
+			:is('playbook')?'playbook'
+			:is('mac')?'mac'+ (/mac os x ((\d+)[.|_](\d+))/.test(ua) ?    ( ' mac' + (RegExp.$2)  +  ' mac' + (RegExp.$1).replace('.',"_")  )     : '' )
+			:is('win')?'win'+
+					(is('windows nt 6.2')?' win8'
+					:is('windows nt 6.1')?' win7'
+					:is('windows nt 6.0')?' vista'
+					:is('windows nt 5.2') || is('windows nt 5.1') ? ' win_xp' 
+					:is('windows nt 5.0')?' win_2k'
+					:is('windows nt 4.0') || is('WinNT4.0') ?' win_nt'
+					: ''
+					) 
+			:is('freebsd')?'freebsd'
+			:(is('x11|linux'))?'linux'
+			:''
+			
+			// user agent language
+			,(/[; |\[](([a-z]{2})(\-[a-z]{2})?)[)|;|\]]/i.test(ua))?(lang+RegExp.$2).replace("-","_")+(RegExp.$3!=''?(' '+lang+RegExp.$1).replace("-","_"):''):''
+		
+			// beta: test if running iPad app
+			,( is('ipad|iphone|ipod') && !is('safari') )  ?  'ipad_app'  : ''
+		
+		
+		]; // b
+		
+	console.debug(ua);
+
+    function screenSize() {
+		var w = window.outerWidth || html.clientWidth;
+		var h = window.outerHeight || html.clientHeight;
+		uaInfo.orientation = ((w<h) ? "portrait" : "landscape");
+        // remove previous min-width, max-width, client-width, client-height, and orientation
+        html.className = html.className.replace(/ ?orientation_\w+/g, "").replace(/ [min|max|cl]+[w|h]_\d+/g, "")
+        for (var i=(allScreens-1);i>=0;i--) { if (w >= screens[i] ) { uaInfo.maxw = screens[i]; break; }}
+		widthClasses="";
+        for (var info in uaInfo) { widthClasses+=" "+info+"_"+ uaInfo[info]  };
+		html.className =  ( html.className +widthClasses  );
+		return widthClasses;
+	} // screenSize
+	
+    window.onresize = screenSize;
+	screenSize();	
+
+    function retina(){
+      var r = window.devicePixelRatio > 1;
+      if (r) {      	
+        html.className+=' retina';
+      }
+      else {
+        html.className+=' non-retina';
+      }
+    }
+    retina();
+
+	var cssbs = (b.join(' ')) + " js ";
+	html.className =   ( cssbs + html.className.replace(/\b(no[-|_]?)?js\b/g,"")  ).replace(/^ /, "").replace(/ +/g," ");
+
+	return cssbs;
+}
+	
+css_browser_selector(navigator.userAgent);

packages/app/src/global.less

@@ -0,0 +1,26 @@
+.win {
+  /* width */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: #f1f1f1; 
+  }
+  
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: #888; 
+  }
+
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
+}
+
+.ant-page-header-footer {
+  margin-top: 5px;
+}

packages/plugin-collections/src/collections/actions.ts

@@ -106,6 +106,11 @@ export default {
       name: 'list',
       title: '查看',
     },
+    {
+      type: 'destroy',
+      name: 'destroy',
+      title: '删除',
+    },
     {
       type: 'create',
       name: 'create',
@@ -118,11 +123,6 @@ export default {
       title: '编辑',
       viewName: 'form',
     },
-    {
-      type: 'destroy',
-      name: 'destroy',
-      title: '删除',
-    },
   ],
   views: [
     {
@@ -146,7 +146,7 @@ export default {
       title: '简易模式',
       template: 'SimpleTable',
       default: true,
-      actionNames: ['create', 'destroy'],
+      actionNames: ['destroy', 'create'],
       detailsViewName: 'details',
       updateViewName: 'form',
       paginated: false,

packages/plugin-collections/src/collections/collections.ts

@@ -302,6 +302,11 @@ export default {
       name: 'list',
       title: '查看',
     },
+    {
+      type: 'destroy',
+      name: 'destroy',
+      title: '删除',
+    },
     {
       type: 'create',
       name: 'create',
@@ -314,11 +319,6 @@ export default {
       title: '编辑',
       viewName: 'form',
     },
-    {
-      type: 'destroy',
-      name: 'destroy',
-      title: '删除',
-    },
   ],
   views: [
     {
@@ -350,7 +350,7 @@ export default {
       name: 'table',
       title: '全部数据',
       template: 'Table',
-      actionNames: ['create', 'destroy'],
+      actionNames: ['destroy', 'create'],
       default: true,
       draggable: true,
     },

packages/plugin-collections/src/collections/fields.ts

@@ -189,16 +189,16 @@ export default {
       name: 'precision',
       title: '精度',
       dataSource: [
-        {value: 1, label: '1'},
-        {value: 0.1, label: '1.0'},
-        {value: 0.01, label: '1.00'},
-        {value: 0.001, label: '1.000'},
-        {value: 0.0001, label: '1.0000'},
+        {value: 0, label: '1'},
+        {value: 1, label: '1.0'},
+        {value: 2, label: '1.00'},
+        {value: 3, label: '1.000'},
+        {value: 4, label: '1.0000'},
       ],
       component: {
         type: 'number',
         showInForm: true,
-        default: 1,
+        default: 0,
       },
     },
     {
@@ -214,7 +214,7 @@ export default {
       component: {
         type: 'string',
         showInForm: true,
-        default: 'YYYY/MM/DD',
+        default: 'YYYY-MM-DD',
       },
     },
     {
@@ -498,6 +498,11 @@ export default {
       name: 'list',
       title: '查看',
     },
+    {
+      type: 'destroy',
+      name: 'destroy',
+      title: '删除',
+    },
     {
       type: 'create',
       name: 'create',
@@ -510,11 +515,6 @@ export default {
       title: '编辑',
       viewName: 'form',
     },
-    {
-      type: 'destroy',
-      name: 'destroy',
-      title: '删除',
-    },
   ],
   views: [
     {
@@ -538,7 +538,7 @@ export default {
       title: '简易模式',
       template: 'SimpleTable',
       default: true,
-      actionNames: ['create', 'destroy'],
+      actionNames: ['destroy', 'create'],
       detailsViewName: 'details',
       updateViewName: 'form',
       paginated: false,

packages/plugin-collections/src/collections/tabs.ts

@@ -239,6 +239,11 @@ export default {
       name: 'list',
       title: '查看',
     },
+    {
+      type: 'destroy',
+      name: 'destroy',
+      title: '删除',
+    },
     {
       type: 'create',
       name: 'create',
@@ -251,11 +256,6 @@ export default {
       title: '编辑',
       viewName: 'form',
     },
-    {
-      type: 'destroy',
-      name: 'destroy',
-      title: '删除',
-    },
   ],
   views: [
     {
@@ -279,7 +279,7 @@ export default {
       title: '简易模式',
       template: 'SimpleTable',
       default: true,
-      actionNames: ['create', 'destroy'],
+      actionNames: ['destroy', 'create'],
       detailsViewName: 'details',
       updateViewName: 'form',
       paginated: false,

packages/plugin-collections/src/collections/views.ts

@@ -217,6 +217,11 @@ export default {
       name: 'list',
       title: '查看',
     },
+    {
+      type: 'destroy',
+      name: 'destroy',
+      title: '删除',
+    },
     {
       type: 'create',
       name: 'create',
@@ -229,11 +234,6 @@ export default {
       title: '编辑',
       viewName: 'form',
     },
-    {
-      type: 'destroy',
-      name: 'destroy',
-      title: '删除',
-    },
   ],
   views: [
     {
@@ -257,7 +257,7 @@ export default {
       title: '简易模式',
       template: 'SimpleTable',
       default: true,
-      actionNames: ['create', 'destroy'],
+      actionNames: ['destroy', 'create'],
       detailsViewName: 'details',
       updateViewName: 'form',
       paginated: false,

packages/plugin-collections/src/hooks/collections-after-create.ts

@@ -12,6 +12,11 @@ const defaultValues = {
       name: 'list',
       title: '查看',
     },
+    {
+      type: 'destroy',
+      name: 'destroy',
+      title: '删除',
+    },
     {
       type: 'create',
       name: 'create',
@@ -24,11 +29,6 @@ const defaultValues = {
       title: '编辑',
       viewName: 'form',
     },
-    {
-      type: 'destroy',
-      name: 'destroy',
-      title: '删除',
-    },
   ],
   views: [
     {
@@ -60,7 +60,7 @@ const defaultValues = {
       name: 'table',
       title: '全部数据',
       template: 'Table',
-      actionNames: ['filter', 'create', 'destroy'],
+      actionNames: ['filter', 'destroy', 'create'],
       default: true,
     },
   ],

packages/plugin-collections/src/interfaces/types.ts

@@ -67,7 +67,7 @@ export const number = {
     type: 'float',
     filterable: true,
     sortable: true,
-    precision: 1, // 需要考虑
+    precision: 0, // 需要考虑
     component: {
       type: 'number',
     },
@@ -85,7 +85,7 @@ export const percent = {
     type: 'float',
     filterable: true,
     sortable: true,
-    precision: 1,
+    precision: 0,
     component: {
       type: 'percent',
     },
@@ -352,7 +352,7 @@ export const createdAt = {
     // name: 'created_at',
     field: 'created_at',
     showTime: true,
-    dateFormat: 'YYYY/MM/DD',
+    dateFormat: 'YYYY-MM-DD',
     timeFormat: 'HH:mm:ss',
     required: true,
     filterable: true,
@@ -371,7 +371,7 @@ export const updatedAt = {
     // name: 'updated_at',
     field: 'updated_at',
     showTime: true,
-    dateFormat: 'YYYY/MM/DD',
+    dateFormat: 'YYYY-MM-DD',
     timeFormat: 'HH:mm:ss',
     required: true,
     filterable: true,

packages/plugin-users/src/collections/users.ts

@@ -73,6 +73,11 @@ export default {
       name: 'list',
       title: '查看',
     },
+    {
+      type: 'destroy',
+      name: 'destroy',
+      title: '删除',
+    },
     {
       type: 'create',
       name: 'create',
@@ -85,11 +90,6 @@ export default {
       title: '编辑',
       viewName: 'form',
     },
-    {
-      type: 'destroy',
-      name: 'destroy',
-      title: '删除',
-    },
   ],
   views: [
     {