Merge branch 'dev' of codeup.aliyun.com:61c14a7efa282c88e103c23f/oak-general-business into dev

lib/components/func/debugPanel/index.js

@@ -28,13 +28,8 @@ exports.default = OakComponent({
         handlePopup: function () {
             this.setVisible(true);
         },
-        onVisibleChange: function (e) {
+        handlePopupClose: function () {
-            this.setVisible(e.detail.visible);
-        },
-        onClose: function () {
-            if (this.state.visible) {
             this.setVisible(false);
-            }
         },
         //小程序重置
         handleReset: function () {
@@ -67,6 +62,6 @@ exports.default = OakComponent({
         },
         resetEnv: function (data) {
             this.features.localStorage.resetAll(data);
-        }
+        },
     },
 });

lib/components/func/debugPanel/index.xml

@@ -1,7 +1,7 @@
 <view bind:tap="handlePopup" class="btn-popup">
-    <oak-icon type="fas" name="chevron-up" ></oak-icon>
+    <oak-icon name="packup" ></oak-icon>
 </view>
-<l-arc-popup show="{{visible}}" bind:linclose="onClose">
+<l-arc-popup show="{{visible}}" bind:linclose="handlePopupClose">
     <view class="block block--bottom">
         <view class="btn-box">
             <l-button type="default" l-class="btn-item" l-label-class="btn-item-label" size="mini" shape="semicircle" bind:lintap="printRunningTree">

lib/components/func/debugPanel/web.js

@@ -4,20 +4,17 @@ var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = tslib_1.__importStar(require("react"));
 var antd_1 = require("antd");
-var icons_1 = require("@ant-design/icons");
 var web_module_less_1 = tslib_1.__importDefault(require("./web.module.less"));
-// import OakIcon from '../../icon'
+var icon_1 = tslib_1.__importDefault(require("../../icon"));
 function render(props) {
     var _a = props.data, _b = _a.placement, placement = _b === void 0 ? 'bottom' : _b, _c = _a.style, style = _c === void 0 ? {} : _c;
     var _d = props.methods, printCachedStore = _d.printCachedStore, printDebugStore = _d.printDebugStore, printRunningTree = _d.printRunningTree, resetInitialData = _d.resetInitialData, downloadEnv = _d.downloadEnv, resetEnv = _d.resetEnv;
     var _e = tslib_1.__read((0, react_1.useState)(false), 2), visible = _e[0], setVisible = _e[1];
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(antd_1.Button, { type: "text", shape: "circle", icon: (0, jsx_runtime_1.jsx)(icons_1.UpOutlined, { style: { fontSize: 12 } }), 
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(antd_1.Button, { type: "text", shape: "circle", icon: (0, jsx_runtime_1.jsx)(icon_1.default, { name: "packup" }), style: tslib_1.__assign({ position: 'fixed', bottom: 0, right: 'calc(100% / 2 - 16px)', zIndex: 999, width: 32, height: 32 }, style), onClick: function () {
-                // icon={<OakIcon type="fas" name="chevron-up" />}
-                style: tslib_1.__assign({ position: 'fixed', bottom: 0, right: 'calc(100% / 2 - 16px)', zIndex: 999, width: 32, height: 32 }, style), onClick: function () {
                     setVisible(true);
                 } }), (0, jsx_runtime_1.jsxs)(antd_1.Drawer, tslib_1.__assign({ getContainer: false, placement: placement, open: visible, onClose: function () {
                     setVisible(false);
-                }, title: "Debug\u63A7\u5236\u53F0", footer: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), className: web_module_less_1.default.drawer }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", accept: "application/json", hidden: true, id: "upload", onChange: function () {
+                }, title: "Debug\u63A7\u5236\u53F0", footer: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), rootClassName: web_module_less_1.default.drawer }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", accept: "application/json", hidden: true, id: "upload", onChange: function () {
                             var file = document.getElementById('upload')
                                 .files[0];
                             if (typeof FileReader === undefined) {

lib/components/icon-font-awesome/fontawesome.less

@@ -17,7 +17,7 @@
 @font-face {
     font-family: 'Font Awesome 6 Free Brands';
     src: url('//cdn.staticfile.org/font-awesome/6.2.1/webfonts/fa-brands-400.ttf') format('truetype');
-    font-weight: 900;
+    font-weight: 400;
     font-style: normal;
     font-display: swap;
 }

lib/components/icon-font-awesome/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: import("react").ComponentType<any>;
+export default _default;

lib/components/icon-font-awesome/index.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = OakComponent({
+    isList: false,
+    properties: {
+        type: {
+            type: String,
+            value: 'fas',
+        },
+        size: {
+            type: Number,
+            optionalTypes: [Number, String],
+            value: 0,
+        },
+        color: {
+            type: String,
+            value: 'primary',
+        },
+        name: {
+            type: String,
+            value: '',
+        },
+        larger: {
+            type: String,
+            value: '1x',
+        },
+    },
+});

lib/components/icon-font-awesome/index.json

@@ -0,0 +1,3 @@
+{
+    "component": true
+}

lib/components/icon-font-awesome/index.less

@@ -0,0 +1,22 @@
+@import './fontawesome.less';
+@import '../../config/styles/mp/index.less';
+
+.primary {
+    color: @oak-color-primary;
+}
+
+.error {
+    color: @oak-color-error;
+}
+
+.warning {
+    color: @oak-color-warning;
+}
+
+.success {
+    color: @oak-color-success;
+}
+
+.info {
+    color: @oak-color-info;
+}

lib/components/icon-font-awesome/index.xml

@@ -0,0 +1,9 @@
+<block wx:if="{{type==='far' || type==='fas'}}">
+    <text
+     class="fa {{type}} fa-{{name}} fa-{{larger || '1x'}} {{color || 'primary'}}"
+      style="{{ size ? 'font-size:'+size+'rpx;':''}}{{ color && color !== 'primary'  && color !== 'info'&& color !== 'error'&& color !== 'success'&& color !== 'warning' ? 'color:' + color+';' : '' }}">
+      </text>
+</block>
+<block wx:else>
+    <text>不支持的icon类型{{type}}</text>
+</block>

lib/components/icon-font-awesome/web.d.ts

@@ -0,0 +1,11 @@
+import { WebComponentProps } from 'oak-frontend-base';
+import { EntityDict } from '../../general-app-domain';
+import './web.less';
+export default function Render(props: WebComponentProps<EntityDict, 'user', false, {
+    name: string;
+    type: 'far' | 'fas';
+    color?: 'primary' | 'success' | 'error' | 'waring' | 'info' | string;
+    className?: string;
+    size?: string;
+    larger?: '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x' | 'xs' | '2xs' | 'sm' | 'lg' | 'xl' | '2xl';
+}, {}>): JSX.Element;

lib/components/icon-font-awesome/web.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+require("./web.less");
+function Render(props) {
+    var data = props.data;
+    var name = data.name, type = data.type, _a = data.color, color = _a === void 0 ? 'primary' : _a, size = data.size, className = data.className, _b = data.larger, larger = _b === void 0 ? '1x' : _b;
+    var isColor = ['primary', 'info', 'success', 'error', 'warning'].includes(color);
+    if (['far', 'fas'].includes(type)) {
+        var class_name = type + ' ' + 'fa-' + name;
+        if (className) {
+            class_name += ' ' + className;
+        }
+        if (larger) {
+            class_name += ' ' + 'fa-' + larger;
+        }
+        if (isColor) {
+            class_name += ' ' + 'oak-icon__' + color;
+        }
+        return ((0, jsx_runtime_1.jsx)("span", { className: class_name, style: Object.assign({}, size && { fontSize: size }, !isColor && { color: color }) }));
+    }
+    return (0, jsx_runtime_1.jsxs)("span", { children: ["\u4E0D\u652F\u6301\u7684icon\u7C7B\u578B", type] });
+}
+exports.default = Render;

lib/components/icon-font-awesome/web.less

@@ -0,0 +1,21 @@
+@import './fontawesome.less';
+
+.oak-icon__primary {
+    color: var(--oak-color-primary);
+}
+
+.oak-icon__error {
+    color: var(--oak-color-error);
+}
+
+.oak-icon__warning {
+    color: var(--oak-color-warning);
+}
+
+.oak-icon__success {
+    color: var(--oak-color-success);
+}
+
+.oak-icon__info {
+    color: var(--oak-color-info);
+}

lib/components/icon/index.js

@@ -2,27 +2,25 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = OakComponent({
     isList: false,
+    wechatMp: {
+        externalClasses: ['oak-class'],
+    },
     properties: {
-        type: {
-            type: String,
-            value: 'fas',
-        },
-        size: {
-            type: Number,
-            optionalTypes: [Number, String],
-            value: 0,
-        },
-        color: {
-            type: String,
-            value: 'primary',
-        },
         name: {
             type: String,
             value: '',
         },
-        larger: {
+        custom: {
             type: String,
-            value: '1x',
+            value: '',
+        },
+        size: {
+            type: Number,
+            value: 14,
+        },
+        color: {
+            type: String,
+            value: '',
         },
     },
 });

lib/components/icon/index.less

@@ -1,22 +1,22 @@
-@import './fontawesome.less';
+@import './iconfont.less';
 @import '../../config/styles/mp/index.less';
 
-.primary {
+.oak-icon__primary {
     color: @oak-color-primary;
 }
 
-.error {
+.oak-icon__error {
     color: @oak-color-error;
 }
 
-.warning {
+.oak-icon__warning {
     color: @oak-color-warning;
 }
 
-.success {
+.oak-icon__success {
     color: @oak-color-success;
 }
 
-.info {
+.oak-icon__info {
     color: @oak-color-info;
 }

lib/components/icon/index.xml

@@ -1,9 +1 @@
-<block wx:if="{{type==='far' || type==='fas'}}">
+<view class="oak-class oak-icon {{ name === '' ? '' : 'oak-icon-' +  name }} {{ color === '' || color === 'primary' || color === 'info' || color === 'error' || color === 'success' || color === 'warning' ? 'oak-icon__' +  (color || 'primary') : ''}} {{ custom }}" style="font-size: {{ size }}px; {{ color && color !== 'primary'  && color !== 'info'&& color !== 'error'&& color !== 'success'&& color !== 'warning' ? 'color:' + color : '' }}"></view>
-    <text
-     class="fa {{type}} fa-{{name}} fa-{{larger || '1x'}} {{color || 'primary'}}"
-      style="{{ size ? 'font-size:'+size+'rpx;':''}}{{ color && color !== 'primary'  && color !== 'info'&& color !== 'error'&& color !== 'success'&& color !== 'warning' ? 'color:' + color+';' : '' }}">
-      </text>
-</block>
-<block wx:else>
-    <text>不支持的icon类型{{type}}</text>
-</block>

lib/components/icon/web.d.ts

@@ -1,11 +1,11 @@
 import { WebComponentProps } from 'oak-frontend-base';
+import React from 'react';
 import { EntityDict } from '../../general-app-domain';
 import './web.less';
 export default function Render(props: WebComponentProps<EntityDict, 'user', false, {
     name: string;
-    type: 'far' | 'fas';
     color?: 'primary' | 'success' | 'error' | 'waring' | 'info' | string;
-    className?: string;
     size?: string;
-    larger?: '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x' | 'xs' | '2xs' | 'sm' | 'lg' | 'xl' | '2xl';
+    className?: string;
+    style?: React.CSSProperties;
 }, {}>): JSX.Element;

lib/components/icon/web.js

@@ -4,21 +4,15 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 require("./web.less");
 function Render(props) {
     var data = props.data;
-    var name = data.name, type = data.type, _a = data.color, color = _a === void 0 ? 'primary' : _a, size = data.size, className = data.className, _b = data.larger, larger = _b === void 0 ? '1x' : _b;
+    var name = data.name, _a = data.color, color = _a === void 0 ? '' : _a, size = data.size, className = data.className, _b = data.style, style = _b === void 0 ? {} : _b;
     var isColor = ['primary', 'info', 'success', 'error', 'warning'].includes(color);
-    if (['far', 'fas'].includes(type)) {
+    var class_name = 'oak-icon ' + 'oak-icon-' + name;
-        var class_name = type + ' ' + 'fa-' + name;
     if (className) {
         class_name += ' ' + className;
     }
-        if (larger) {
+    if (isColor || color === '') {
-            class_name += ' ' + 'fa-' + larger;
+        class_name += ' ' + 'oak-icon__' + (color || 'primary');
     }
-        if (isColor) {
+    return ((0, jsx_runtime_1.jsx)("span", { className: class_name, style: Object.assign(style, size && { fontSize: size }, color && !isColor && { color: color }) }));
-            class_name += ' ' + 'oak-icon__' + color;
-        }
-        return ((0, jsx_runtime_1.jsx)("span", { className: class_name, style: Object.assign({}, size && { fontSize: size }, !isColor && { color: color }) }));
-    }
-    return (0, jsx_runtime_1.jsxs)("span", { children: ["\u4E0D\u652F\u6301\u7684icon\u7C7B\u578B", type] });
 }
 exports.default = Render;

lib/components/icon/web.less

@@ -1,4 +1,4 @@
-@import './fontawesome.less';
+@import './iconfont.less';
 
 .oak-icon__primary {
     color: var(--oak-color-primary);

lib/pages/user/manage/detail/index.js

@@ -48,7 +48,9 @@ exports.default = OakComponent({
         var _c = user || {}, id = _c.id, nickname = _c.nickname, idState = _c.idState, userState = _c.userState, name = _c.name, gender = _c.gender, mobile$user = _c.mobile$user, birth = _c.birth, extraFile$entity = _c.extraFile$entity;
         var mobile = mobile$user && ((_b = mobile$user[0]) === null || _b === void 0 ? void 0 : _b.mobile);
         var mobileCount = mobile$user ? mobile$user.length : 0;
-        var mobileText = mobileCount && mobileCount > 1 ? "".concat(mobileCount, "\u6761\u624B\u673A\u53F7") : (mobile || '未设置');
+        var mobileText = mobileCount && mobileCount > 1
+            ? "".concat(mobileCount, "\u6761\u624B\u673A\u53F7")
+            : mobile || '未设置';
         var avatar = extraFile$entity &&
             extraFile$entity[0] &&
             (0, extraFile_1.composeFileUrl)(extraFile$entity[0]);
@@ -59,7 +61,7 @@ exports.default = OakComponent({
             mobile: mobile,
             gender: gender,
             avatar: avatar,
-            birth: birth ? (new Date(birth)).toLocaleDateString() : '',
+            birth: birth ? new Date(birth).toLocaleDateString() : '',
             userState: userState,
             idState: idState,
             mobileCount: mobileCount,
@@ -85,34 +87,31 @@ exports.default = OakComponent({
         idStateColor: {
             verifying: 'primary',
             verified: 'success',
-            unverified: 'warning'
+            unverified: 'warning',
         },
         show: false,
         actionDescriptions: {
             accept: {
                 icon: {
-                    name: 'circle-check',
+                    name: 'success',
-                    type: 'far',
                 },
                 label: '通过',
             },
             activate: {
                 icon: {
-                    name: 'chart-line',
+                    name: 'playon',
                 },
                 label: '激活',
             },
             disable: {
                 icon: {
-                    name: 'bell-slash',
+                    name: 'shielding',
-                    type: 'far',
                 },
                 label: '禁用',
             },
             enable: {
                 icon: {
-                    name: 'bell',
+                    name: 'barrage',
-                    type: 'far',
                 },
                 label: '启用',
             },
@@ -124,19 +123,19 @@ exports.default = OakComponent({
             },
             update: {
                 icon: {
-                    name: 'edit',
+                    name: 'editor',
                 },
                 label: '更新',
             },
             verify: {
                 icon: {
-                    name: 'certificate',
+                    name: 'businesscard',
                 },
                 label: '验证',
             },
             play: {
                 icon: {
-                    name: 'person-praying',
+                    name: 'refresh',
                 },
                 label: '切换',
             },
@@ -190,6 +189,6 @@ exports.default = OakComponent({
         onActionClickMp: function (e) {
             var action = e.detail.action;
             return this.onActionClick(action);
-        }
+        },
     },
 });

lib/pages/user/manage/detail/index.xml

@@ -9,74 +9,26 @@
         </block>
     </view>
     <view class="col"> 
-        <l-list is-link="{{false}}">            
+        <l-list is-link="{{false}}" title="昵称">            
-            <view slot="left-section" class="left">
-                <view class="icon">
-                    <oak-icon name="comment-dots" />
-                </view>
-                <view class="label">
-                    昵称
-                </view>
-            </view>
             <view slot="right-section" class="value">{{nickname || '未设置'}}</view>
         </l-list>
-        <l-list is-link="{{false}}">          
+        <l-list is-link="{{false}}" title="姓名">          
-            <view slot="left-section" class="left">
-                <view class="icon">
-                    <oak-icon name="file-signature" />
-                </view>
-                <view class="label">
-                    姓名
-                </view>
-            </view>
             <view slot="right-section" class="value">{{name || '未设置'}}</view>
         </l-list>
-        <l-list is-link="{{false}}">      
+        <l-list is-link="{{false}}" title="性别">      
-            <view slot="left-section" class="left">
-                <view class="icon">
-                    <oak-icon name="person-half-dress" />
-                </view>
-                <view class="label">
-                    性别
-                </view>
-            </view>
             <view slot="right-section" class="value">{{gender || '未设置'}}</view>
         </l-list>
-        <l-list is-link="{{false}}">      
+        <l-list is-link="{{false}}" title="手机号">      
-            <view slot="left-section" class="left">
-                <view class="icon">
-                    <oak-icon name="mobile-screen" />
-                </view>
-                <view class="label">
-                    手机号
-                </view>
-            </view>
             <view slot="right-section" class="value">{{mobileText}}</view>
         </l-list>
-        <l-list tag-position="right" is-link="{{false}}">   
+        <l-list tag-position="right" is-link="{{false}}" title="用户状态">   
-            <view slot="left-section" class="left">
-                <view class="icon">
-                    <oak-icon name="info" />
-                </view>
-                <view class="label">
-                    用户状态
-                </view>
-            </view>
             <view slot="right-section" class="value">            
                 <l-tag l-class="{{stateColor[userState]}}" size="mini" shape="circle">
                     {{userState || '未设置'}}
                 </l-tag>
             </view>
         </l-list>
-        <l-list tag-position="right" is-link="{{false}}">   
+        <l-list tag-position="right" is-link="{{false}}" title="认证状态">   
-            <view slot="left-section" class="left">
-                <view class="icon">
-                    <oak-icon name="chess-bishop" />
-                </view>
-                <view class="label">
-                    认证状态
-                </view>
-            </view>
             <view slot="right-section" class="value">            
                 <l-tag l-class="{{idStateColor[idState]}}" size="mini" shape="circle">
                     {{idState || '未设置'}}

package.json

@@ -75,10 +75,12 @@
     "scripts": {
         "make:domain": "ts-node ./scripts/make.ts",
         "clean": "rimraf lib/*",
-        "copy-files": "copyfiles -u 1 src/**/*.svg lib/ & copyfiles -u 1 src/**/*.xml lib/ & copyfiles -u 1 src/**/*.wxml lib/ & copyfiles -u 1 src/**/*.wxs lib/ & copyfiles -u 1 src/miniprogram_npm/**/*.js lib/ ",
+        "copy-files": "copyfiles -u 1 src/miniprogram_npm/**/*.js lib/ ",
-        "copy-less": "copyfiles -u 1 src/**/*.less lib/",
+        "copy-svg": "copyfiles -u 1 src/**/*.svg lib/",
-        "copy-wxss": "copyfiles -u 1 src/**/*.wxss lib/",
+        "copy-less": "copyfiles -u 1 src/**/*.less lib/ & copyfiles -u 1 src/**/*.wxss lib/",
-        "build": "tsc && npm run copy-files && npm run copy-less && npm run copy-wxss",
+        "copy-wxs": "copyfiles -u 1 src/**/*.wxs lib/",
+        "copy-wxml": "copyfiles -u 1 src/**/*.xml lib/ & copyfiles -u 1 src/**/*.wxml lib/",
+        "build": "tsc && npm run copy-files && npm run copy-less && npm run copy-wxs && npm run copy-svg && npm run copy-wxml",
         "gen:areaDebug": "ts-node ./scripts/generateAreaDebug.ts",
         "clean:dir": "ts-node ./scripts/cleanDtsAndJs",
         "test": "ts-node ./test/test.ts",

src/components/func/debugPanel/index.ts

@@ -27,13 +27,8 @@ export default OakComponent({
         handlePopup() {
             this.setVisible(true);
         },
-        onVisibleChange(e: any) {
+        handlePopupClose() {
-            this.setVisible(e.detail.visible);
-        },
-        onClose() {
-            if (this.state.visible) {
             this.setVisible(false);
-            }
         },
         //小程序重置
         handleReset() {
@@ -69,6 +64,6 @@ export default OakComponent({
         },
         resetEnv(data: Record<string, any>) {
             this.features.localStorage.resetAll(data);
-        }
+        },
     },
 });

src/components/func/debugPanel/index.xml

@@ -1,7 +1,7 @@
 <view bind:tap="handlePopup" class="btn-popup">
-    <oak-icon type="fas" name="chevron-up" ></oak-icon>
+    <oak-icon name="packup" ></oak-icon>
 </view>
-<l-arc-popup show="{{visible}}" bind:linclose="onClose">
+<l-arc-popup show="{{visible}}" bind:linclose="handlePopupClose">
     <view class="block block--bottom">
         <view class="btn-box">
             <l-button type="default" l-class="btn-item" l-label-class="btn-item-label" size="mini" shape="semicircle" bind:lintap="printRunningTree">

src/components/func/debugPanel/web.tsx

@@ -1,10 +1,9 @@
 import React, { useState } from 'react';
 import { Button, Space, Drawer, Modal, Tooltip } from 'antd';
-import { UpOutlined } from '@ant-design/icons';
 import { WebComponentProps } from 'oak-frontend-base';
 import { EntityDict } from '../../../general-app-domain';
 import Style from './web.module.less';
-// import OakIcon from '../../icon'
+import OakIcon from '../../icon'
 
 export default function render(props: WebComponentProps<EntityDict, 'address', true, {
     placement: 'top' | 'bottom' | 'left' | 'right',
@@ -25,8 +24,7 @@ export default function render(props: WebComponentProps<EntityDict, 'address', t
             <Button
                 type="text"
                 shape="circle"
-                icon={<UpOutlined style={{ fontSize: 12 }} />}
+                icon={<OakIcon name="packup" />}
-                // icon={<OakIcon type="fas" name="chevron-up" />}
                 style={{
                     position: 'fixed',
                     bottom: 0,
@@ -49,7 +47,7 @@ export default function render(props: WebComponentProps<EntityDict, 'address', t
                 }}
                 title="Debug控制台"
                 footer={<></>}
-                className={Style.drawer}
+                rootClassName={Style.drawer}
             >
                 <input
                     type="file"

src/components/icon-font-awesome/fontawesome.less

@@ -17,7 +17,7 @@
 @font-face {
     font-family: 'Font Awesome 6 Free Brands';
     src: url('//cdn.staticfile.org/font-awesome/6.2.1/webfonts/fa-brands-400.ttf') format('truetype');
-    font-weight: 900;
+    font-weight: 400;
     font-style: normal;
     font-display: swap;
 }

src/components/icon-font-awesome/index.json

@@ -0,0 +1,3 @@
+{
+    "component": true
+}

src/components/icon-font-awesome/index.less

@@ -0,0 +1,22 @@
+@import './fontawesome.less';
+@import '../../config/styles/mp/index.less';
+
+.primary {
+    color: @oak-color-primary;
+}
+
+.error {
+    color: @oak-color-error;
+}
+
+.warning {
+    color: @oak-color-warning;
+}
+
+.success {
+    color: @oak-color-success;
+}
+
+.info {
+    color: @oak-color-info;
+}

src/components/icon-font-awesome/index.ts

@@ -0,0 +1,27 @@
+
+export default OakComponent({
+    isList: false,
+    properties: {
+        type: {
+            type: String,
+            value: 'fas',
+        },
+        size: {
+            type: Number,
+            optionalTypes: [Number, String],
+            value: 0,
+        },
+        color: {
+            type: String,
+            value: 'primary',
+        },
+        name: {
+            type: String,
+            value: '',
+        },
+        larger: {
+            type: String,
+            value: '1x',
+        },
+    },
+});

src/components/icon-font-awesome/index.xml

@@ -0,0 +1,9 @@
+<block wx:if="{{type==='far' || type==='fas'}}">
+    <text
+     class="fa {{type}} fa-{{name}} fa-{{larger || '1x'}} {{color || 'primary'}}"
+      style="{{ size ? 'font-size:'+size+'rpx;':''}}{{ color && color !== 'primary'  && color !== 'info'&& color !== 'error'&& color !== 'success'&& color !== 'warning' ? 'color:' + color+';' : '' }}">
+      </text>
+</block>
+<block wx:else>
+    <text>不支持的icon类型{{type}}</text>
+</block>

src/components/icon-font-awesome/web.less

@@ -0,0 +1,21 @@
+@import './fontawesome.less';
+
+.oak-icon__primary {
+    color: var(--oak-color-primary);
+}
+
+.oak-icon__error {
+    color: var(--oak-color-error);
+}
+
+.oak-icon__warning {
+    color: var(--oak-color-warning);
+}
+
+.oak-icon__success {
+    color: var(--oak-color-success);
+}
+
+.oak-icon__info {
+    color: var(--oak-color-info);
+}

src/components/icon-font-awesome/web.tsx

@@ -0,0 +1,71 @@
+import { WebComponentProps } from 'oak-frontend-base';
+import React from 'react';
+import { EntityDict } from '../../general-app-domain';
+import './web.less';
+
+export default function Render(
+    props: WebComponentProps<
+        EntityDict,
+        'user',
+        false,
+        {
+            name: string;
+            type: 'far' | 'fas';
+            color?: 'primary' | 'success' | 'error' | 'waring' | 'info' | string;
+            className?: string;
+            size?: string;
+            larger?:
+                | '1x'
+                | '2x'
+                | '3x'
+                | '4x'
+                | '5x'
+                | '6x'
+                | '7x'
+                | '8x'
+                | '9x'
+                | '10x'
+                | 'xs'
+                | '2xs'
+                | 'sm'
+                | 'lg'
+                | 'xl'
+                | '2xl';
+        },
+        {}
+    >
+) {
+    const { data } = props;
+
+    const { name, type, color = 'primary', size, className, larger = '1x' } = data;
+
+    const isColor = ['primary', 'info', 'success', 'error', 'warning'].includes(
+        color
+    );
+
+    if (['far', 'fas'].includes(type)) {
+        let class_name = type + ' ' + 'fa-' + name;
+        if (className) {
+            class_name += ' ' + className;
+        }
+        if (larger) {
+            class_name += ' ' + 'fa-' + larger;
+        }
+        if (isColor) {
+             class_name += ' ' + 'oak-icon__' + color;
+        }
+        return (
+            <span
+                className={class_name}
+                style={
+                    Object.assign(
+                        {},
+                        size && { fontSize: size },
+                        !isColor && { color }
+                    ) as React.CSSProperties
+                }
+            ></span>
+        );
+    }
+    return <span>不支持的icon类型{type}</span>;
+}

src/components/icon/index.less

@@ -1,22 +1,22 @@
-@import './fontawesome.less';
+@import './iconfont.less';
 @import '../../config/styles/mp/index.less';
 
-.primary {
+.oak-icon__primary {
     color: @oak-color-primary;
 }
 
-.error {
+.oak-icon__error {
     color: @oak-color-error;
 }
 
-.warning {
+.oak-icon__warning {
     color: @oak-color-warning;
 }
 
-.success {
+.oak-icon__success {
     color: @oak-color-success;
 }
 
-.info {
+.oak-icon__info {
     color: @oak-color-info;
 }

src/components/icon/index.ts

@@ -1,27 +1,25 @@
 
 export default OakComponent({
     isList: false,
+    wechatMp: {
+        externalClasses: ['oak-class'],
+    },
     properties: {
-        type: {
-            type: String,
-            value: 'fas',
-        },
-        size: {
-            type: Number,
-            optionalTypes: [Number, String],
-            value: 0,
-        },
-        color: {
-            type: String,
-            value: 'primary',
-        },
         name: {
             type: String,
             value: '',
         },
-        larger: {
+        custom: {
             type: String,
-            value: '1x',
+            value: '',
+        },
+        size: {
+            type: Number,
+            value: 14,
+        },
+        color: {
+            type: String,
+            value: '',
         },
     },
 });

src/components/icon/index.xml

@@ -1,9 +1 @@
-<block wx:if="{{type==='far' || type==='fas'}}">
+<view class="oak-class oak-icon {{ name === '' ? '' : 'oak-icon-' +  name }} {{ color === '' || color === 'primary' || color === 'info' || color === 'error' || color === 'success' || color === 'warning' ? 'oak-icon__' +  (color || 'primary') : ''}} {{ custom }}" style="font-size: {{ size }}px; {{ color && color !== 'primary'  && color !== 'info'&& color !== 'error'&& color !== 'success'&& color !== 'warning' ? 'color:' + color : '' }}"></view>
-    <text
-     class="fa {{type}} fa-{{name}} fa-{{larger || '1x'}} {{color || 'primary'}}"
-      style="{{ size ? 'font-size:'+size+'rpx;':''}}{{ color && color !== 'primary'  && color !== 'info'&& color !== 'error'&& color !== 'success'&& color !== 'warning' ? 'color:' + color+';' : '' }}">
-      </text>
-</block>
-<block wx:else>
-    <text>不支持的icon类型{{type}}</text>
-</block>

src/components/icon/web.less

@@ -1,4 +1,4 @@
-@import './fontawesome.less';
+@import './iconfont.less';
 
 .oak-icon__primary {
     color: var(--oak-color-primary);

src/components/icon/web.tsx

@@ -10,62 +10,51 @@ export default function Render(
         false,
         {
             name: string;
-            type: 'far' | 'fas';
+            color?:
-            color?: 'primary' | 'success' | 'error' | 'waring' | 'info' | string;
+                | 'primary'
-            className?: string;
+                | 'success'
+                | 'error'
+                | 'waring'
+                | 'info'
+                | string;
             size?: string;
-            larger?:
+            className?: string;
-                | '1x'
+            style?: React.CSSProperties;
-                | '2x'
-                | '3x'
-                | '4x'
-                | '5x'
-                | '6x'
-                | '7x'
-                | '8x'
-                | '9x'
-                | '10x'
-                | 'xs'
-                | '2xs'
-                | 'sm'
-                | 'lg'
-                | 'xl'
-                | '2xl';
         },
         {}
     >
 ) {
     const { data } = props;
 
-    const { name, type, color = 'primary', size, className, larger = '1x' } = data;
+    const {
+        name,
+        color = '',
+        size,
+        className,
+        style = {},
+    } = data;
 
     const isColor = ['primary', 'info', 'success', 'error', 'warning'].includes(
         color
     );
 
-    if (['far', 'fas'].includes(type)) {
+     let class_name = 'oak-icon ' + 'oak-icon-' + name;
-        let class_name = type + ' ' + 'fa-' + name;
      if (className) {
          class_name += ' ' + className;
      }
-        if (larger) {
+     if (isColor || color === '') {
-            class_name += ' ' + 'fa-' + larger;
+         class_name += ' ' + 'oak-icon__' + (color || 'primary');
-        }
-        if (isColor) {
-             class_name += ' ' + 'oak-icon__' + color;
      }
      return (
          <span
              className={class_name}
              style={
                  Object.assign(
-                        {},
+                     style,
                      size && { fontSize: size },
-                        !isColor && { color }
+                     color && !isColor && { color }
                  ) as React.CSSProperties
              }
          ></span>
      );
-    }
-    return <span>不支持的icon类型{type}</span>;
 }

src/pages/user/manage/detail/index.ts

@@ -56,7 +56,10 @@ export default OakComponent({
         } = user || {};
         const mobile = mobile$user && mobile$user[0]?.mobile;
         const mobileCount = mobile$user ? mobile$user.length : 0;
-        const mobileText = mobileCount && mobileCount > 1 ? `${mobileCount}条手机号` : (mobile || '未设置');
+        const mobileText =
+            mobileCount && mobileCount > 1
+                ? `${mobileCount}条手机号`
+                : mobile || '未设置';
         const avatar =
             extraFile$entity &&
             extraFile$entity[0] &&
@@ -68,7 +71,7 @@ export default OakComponent({
             mobile,
             gender,
             avatar,
-            birth: birth ? (new Date(birth)).toLocaleDateString() : '',
+            birth: birth ? new Date(birth).toLocaleDateString() : '',
             userState,
             idState,
             mobileCount,
@@ -94,34 +97,31 @@ export default OakComponent({
         idStateColor: {
             verifying: 'primary',
             verified: 'success',
-            unverified: 'warning'
+            unverified: 'warning',
         },
         show: false,
         actionDescriptions: {
             accept: {
                 icon: {
-                    name: 'circle-check',
+                    name: 'success',
-                    type: 'far',
                 },
                 label: '通过',
             },
             activate: {
                 icon: {
-                    name: 'chart-line',
+                    name: 'playon',
                 },
                 label: '激活',
             },
             disable: {
                 icon: {
-                    name: 'bell-slash',
+                    name: 'shielding',
-                    type: 'far',
                 },
                 label: '禁用',
             },
             enable: {
                 icon: {
-                    name: 'bell',
+                    name: 'barrage',
-                    type: 'far',
                 },
                 label: '启用',
             },
@@ -133,19 +133,19 @@ export default OakComponent({
             },
             update: {
                 icon: {
-                    name: 'edit',
+                    name: 'editor',
                 },
                 label: '更新',
             },
             verify: {
                 icon: {
-                    name: 'certificate',
+                    name: 'businesscard',
                 },
                 label: '验证',
             },
             play: {
                 icon: {
-                    name: 'person-praying',
+                    name: 'refresh',
                 },
                 label: '切换',
             },
@@ -181,6 +181,6 @@ export default OakComponent({
         onActionClickMp(e: WechatMiniprogram.TouchEvent) {
             const { action } = e.detail;
             return this.onActionClick(action);
-        }
+        },
     },
 });

src/pages/user/manage/detail/index.xml

@@ -9,74 +9,26 @@
         </block>
     </view>
     <view class="col"> 
-        <l-list is-link="{{false}}">            
+        <l-list is-link="{{false}}" title="昵称">            
-            <view slot="left-section" class="left">
-                <view class="icon">
-                    <oak-icon name="comment-dots" />
-                </view>
-                <view class="label">
-                    昵称
-                </view>
-            </view>
             <view slot="right-section" class="value">{{nickname || '未设置'}}</view>
         </l-list>
-        <l-list is-link="{{false}}">          
+        <l-list is-link="{{false}}" title="姓名">          
-            <view slot="left-section" class="left">
-                <view class="icon">
-                    <oak-icon name="file-signature" />
-                </view>
-                <view class="label">
-                    姓名
-                </view>
-            </view>
             <view slot="right-section" class="value">{{name || '未设置'}}</view>
         </l-list>
-        <l-list is-link="{{false}}">      
+        <l-list is-link="{{false}}" title="性别">      
-            <view slot="left-section" class="left">
-                <view class="icon">
-                    <oak-icon name="person-half-dress" />
-                </view>
-                <view class="label">
-                    性别
-                </view>
-            </view>
             <view slot="right-section" class="value">{{gender || '未设置'}}</view>
         </l-list>
-        <l-list is-link="{{false}}">      
+        <l-list is-link="{{false}}" title="手机号">      
-            <view slot="left-section" class="left">
-                <view class="icon">
-                    <oak-icon name="mobile-screen" />
-                </view>
-                <view class="label">
-                    手机号
-                </view>
-            </view>
             <view slot="right-section" class="value">{{mobileText}}</view>
         </l-list>
-        <l-list tag-position="right" is-link="{{false}}">   
+        <l-list tag-position="right" is-link="{{false}}" title="用户状态">   
-            <view slot="left-section" class="left">
-                <view class="icon">
-                    <oak-icon name="info" />
-                </view>
-                <view class="label">
-                    用户状态
-                </view>
-            </view>
             <view slot="right-section" class="value">            
                 <l-tag l-class="{{stateColor[userState]}}" size="mini" shape="circle">
                     {{userState || '未设置'}}
                 </l-tag>
             </view>
         </l-list>
-        <l-list tag-position="right" is-link="{{false}}">   
+        <l-list tag-position="right" is-link="{{false}}" title="认证状态">   
-            <view slot="left-section" class="left">
-                <view class="icon">
-                    <oak-icon name="chess-bishop" />
-                </view>
-                <view class="label">
-                    认证状态
-                </view>
-            </view>
             <view slot="right-section" class="value">            
                 <l-tag l-class="{{idStateColor[idState]}}" size="mini" shape="circle">
                     {{idState || '未设置'}}