plain-design 1.0.0-beta.49 → 1.0.0-beta.50

package/src/packages/components/ThemeEditor/index.tsx

@@ -90,37 +90,42 @@ export const ThemeEditor = designComponent({
         {state.isExpand && (
           <div className="theme-editor-form">
             <div>
-              <div>{i18n('theme.inputMode').d('输入框类型')}</div>
+              <div>{i18n.$it('theme.inputMode').d('输入框类型')}</div>
               <div>
                 <Select v-model={state.inputMode} onChange={handler.onInputModeChange} size="mini" popperAttrs={publicPopperAttrs}>
-                  <SelectOption label={i18n('theme.inputModeFlat').d('输入框:填充')} val="flat"/>
-                  <SelectOption label={i18n('theme.inputModelStroke').d('输入框:描边')} val="stroke"/>
+                  <SelectOption label={i18n.$it('theme.inputModeFlat').d('输入框:填充')} val="flat"/>
+                  <SelectOption label={i18n.$it('theme.inputModelStroke').d('输入框:描边')} val="stroke"/>
                 </Select>
               </div>
             </div>
 
             <div>
-              <div>{i18n('theme.buttonMode').d('按钮类型')}</div>
+              <div>{i18n.$it('theme.buttonMode').d('按钮类型')}</div>
               <div>
                 <Select v-model={state.buttonMode} onChange={handler.onButtonModeChange} size="mini" popperAttrs={publicPopperAttrs}>
-                  <SelectOption label={i18n('theme.buttonModeFlat').d('扁平')} val="flat"/>
-                  <SelectOption label={i18n('theme.buttonModeFill').d('填充')} val="fill"/>
-                  <SelectOption label={i18n('theme.buttonModeOutline').d('线框')} val="outline"/>
-                  <SelectOption label={i18n('theme.buttonModeStroke').d('描边')} val="stroke"/>
-                  <SelectOption label={i18n('theme.buttonModeText').d('文字')} val="text"/>
+                  <SelectOption label={i18n.$it('theme.buttonModeFlat').d('扁平')} val="flat"/>
+                  <SelectOption label={i18n.$it('theme.buttonModeFill').d('填充')} val="fill"/>
+                  <SelectOption label={i18n.$it('theme.buttonModeOutline').d('线框')} val="outline"/>
+                  <SelectOption label={i18n.$it('theme.buttonModeStroke').d('描边')} val="stroke"/>
+                  <SelectOption label={i18n.$it('theme.buttonModeText').d('文字')} val="text"/>
                 </Select>
               </div>
             </div>
 
             <div>
-              <div>{i18n('theme.primaryColor').d('主题颜色')}</div>
+              <div>{i18n.$it('theme.primaryColor').d('主题颜色')}</div>
               <div>
                 <Select v-model={state.primaryKey} onChange={handler.onPrimaryChange} size="mini" popperAttrs={publicPopperAttrs}>
                   {Object.entries(ThemePrimaryColors).map(([key, value]) => (
-                    <SelectOption label={i18n('colorName.' + value!.label as any).d(value!.label)} val={key} key={key}>
+                    <SelectOption label={i18n.$it('colorName.' + value!.label as any).d(value!.label)} val={key} key={key}>
                       <div className={getComponentCls('theme-editor-block-item')}>
-                        {!!value!.primary && <span style={{ ...publicBlockStyles, background: value!.primary }}/>}
-                        <span>{i18n('colorName.' + value!.label as any).d(value!.label)}</span>
+                        {(() => {
+                          let themeConfig = value!.themeConfig;
+                          if (!themeConfig) {return null;}
+                          let primary = typeof themeConfig === "string" ? themeConfig : themeConfig[PageThemeUtils.state.dark ? 'dark' : 'light'].base?.primary;
+                          return !!primary && <span style={{ ...publicBlockStyles, background: primary }}/>;
+                        })()}
+                        <span>{i18n.$it('colorName.' + value!.label as any).d(value!.label)}</span>
                       </div>
                     </SelectOption>
                   ))}
@@ -129,40 +134,40 @@ export const ThemeEditor = designComponent({
             </div>
 
             <div>
-              <div>{i18n('theme.size').d('大小尺寸')}</div>
+              <div>{i18n.$it('theme.size').d('大小尺寸')}</div>
               <div>
                 <Select v-model={state.size} onChange={handler.onSizeChange} size="mini" popperAttrs={publicPopperAttrs}>
-                  <SelectOption label={i18n('theme.sizeLarge').d('大尺寸')} val="large"/>
-                  <SelectOption label={i18n('theme.sizeNormal').d('中等尺寸')} val="normal"/>
-                  <SelectOption label={i18n('theme.sizeSmall').d('小尺寸')} val="small"/>
-                  <SelectOption label={i18n('theme.sizeMini').d('极小尺寸')} val="mini"/>
+                  <SelectOption label={i18n.$it('theme.sizeLarge').d('大尺寸')} val="large"/>
+                  <SelectOption label={i18n.$it('theme.sizeNormal').d('中等尺寸')} val="normal"/>
+                  <SelectOption label={i18n.$it('theme.sizeSmall').d('小尺寸')} val="small"/>
+                  <SelectOption label={i18n.$it('theme.sizeMini').d('极小尺寸')} val="mini"/>
                 </Select>
               </div>
             </div>
 
             <div>
-              <div>{i18n('theme.darkMode').d('黑白主题')}</div>
+              <div>{i18n.$it('theme.darkMode').d('黑白主题')}</div>
               <div>
                 <Select v-model={state.dark} onChange={handler.onDarkChange} size="mini" popperAttrs={publicPopperAttrs}>
-                  <SelectOption label={i18n('theme.darkModeOn').d('黑色主题')} val="dark"/>
-                  <SelectOption label={i18n('theme.darkModeOff').d('白色主题')} val="light"/>
+                  <SelectOption label={i18n.$it('theme.darkModeOn').d('黑色主题')} val="dark"/>
+                  <SelectOption label={i18n.$it('theme.darkModeOff').d('白色主题')} val="light"/>
                 </Select>
               </div>
             </div>
 
             <div>
-              <div>{i18n('theme.radiusMode').d('圆角类型')}</div>
+              <div>{i18n.$it('theme.radiusMode').d('圆角类型')}</div>
               <div>
                 <Select v-model={state.shape} onChange={handler.onShapeChange} size="mini" popperAttrs={publicPopperAttrs}>
-                  <SelectOption label={i18n('theme.radiusModeRound').d('圆角')} val="round"/>
-                  <SelectOption label={i18n('theme.radiusModeNormal').d('小圆角')} val="square"/>
-                  <SelectOption label={i18n('theme.radiusModeNone').d('无圆角')} val="none"/>
+                  <SelectOption label={i18n.$it('theme.radiusModeRound').d('圆角')} val="round"/>
+                  <SelectOption label={i18n.$it('theme.radiusModeNormal').d('小圆角')} val="square"/>
+                  <SelectOption label={i18n.$it('theme.radiusModeNone').d('无圆角')} val="none"/>
                 </Select>
               </div>
             </div>
 
             <div>
-              <div>{i18n('theme.scale').d('大小缩放')}</div>
+              <div>{i18n.$it('theme.scale').d('大小缩放')}</div>
               <Select v-model={state.zoom} onChange={handler.onZoomChange} size="mini" placeholder="页面缩放" popperAttrs={publicPopperAttrs}>
                 <SelectOption label="0.6" val={0.6}/>
                 <SelectOption label="0.7" val={0.7}/>
@@ -184,7 +189,7 @@ export const ThemeEditor = designComponent({
 
             <div>
               <div>&nbsp;</div>
-              <Button block size="mini" label={i18n('theme.reset').d('重置')} onClick={() => {
+              <Button block size="mini" label={i18n.$it('theme.reset').d('重置')} onClick={() => {
                 PageThemeUtils.clear();
               }}/>
             </div>

package/src/packages/components/Tree/RenderTreeNode.tsx

@@ -157,7 +157,7 @@ export const RenderTreeNode = designComponent({
           })()}
         </div>
         <div className="tree-node-content" onClick={handler.onClickNodeContent}>
-          {props.treeNode.empty ? i18n('base.noData').d('暂无数据') : (() => {
+          {props.treeNode.empty ? i18n.$it('base.noData').d('暂无数据') : (() => {
             const scope = { treeNode: props.treeNode, index: props.treeNode.flatIndex, };
             return tree.props.renderContent ? tree.props.renderContent(scope) : tree.scopeSlots.default(scope, props.treeNode.label()) as any;
           })()}

package/src/packages/components/Upload/index.tsx

@@ -110,7 +110,7 @@ export const Upload = designComponent({
       [eUploadStatus.empty]: <Icon icon="pi-info-circle"/>,
     };
     const singleEmptyFile: UploadFile = {
-      name: i18n('file.notUpload').d('未上传'),
+      name: i18n.$it('file.notUpload').d('未上传'),
       status: eUploadStatus.empty,
       id: 'nothing'
     };
@@ -151,7 +151,7 @@ export const Upload = designComponent({
           if (props.max != null) {
             if (f.calcSize > props.max) {
               $message.error(
-                i18n('file.oversize', { filename: file.name, filesize: f.calcSize, max: props.max }).d(`[${file.name}]大小为${f.calcSize}MB，超过最大限制${props.max}MB`)
+                i18n.$it('file.oversize', { filename: file.name, filesize: f.calcSize, max: props.max }).d(`[${file.name}]大小为${f.calcSize}MB，超过最大限制${props.max}MB`)
                 , { time: 5000 });
               return false;
             }
@@ -249,7 +249,7 @@ export const Upload = designComponent({
         // 状态不存在或者状态为success表示需要用户处理删除文件在后端的逻辑，否则其他状态直接前端删除
         if (!file.status || file.status === eUploadStatus.success) {
           if (props.removeConfirm) {
-            await $dialog.confirm(i18n('file.areYouSureToDeleteFile', { name: file.name }).d(`确认要删除文件：${file.name} 吗？`));
+            await $dialog.confirm(i18n.$it('file.areYouSureToDeleteFile', { name: file.name }).d(`确认要删除文件：${file.name} 吗？`));
           }
           if (!!props.beforeRemove) {await props.beforeRemove(file);}
           await props.handleRemove!(file);
@@ -289,7 +289,7 @@ export const Upload = designComponent({
             toArray(uploadFiles).forEach(file => {
               file.status = eUploadStatus.success;
               file.percent = undefined;
-              $notice.success(i18n('file.uploadFileSucceed', { name: file.name }).d(`文件[${file.name}]上传成功！`));
+              $notice.success(i18n.$it('file.uploadFileSucceed', { name: file.name }).d(`文件[${file.name}]上传成功！`));
             });
             dfd.resolve();
             emit.onUploadSuccess({ file: uploadFiles, resp: data });
@@ -298,7 +298,7 @@ export const Upload = designComponent({
             toArray(uploadFiles).forEach(file => file.status = eUploadStatus.error);
             dfd.reject();
             emit.onUploadError(error);
-            $notice.error(i18n('file.uploadFailed').d(`文件上传失败！`));
+            $notice.error(i18n.$it('file.uploadFailed').d(`文件上传失败！`));
           },
         };
 
@@ -339,7 +339,7 @@ export const Upload = designComponent({
         <div className="upload-item-inner">
           {!!custom ? custom() : <>
             {file.status ? renderIcon[file.status] : <Icon icon="pi-file"/>}
-            {file.status === eUploadStatus.ready ? `(${i18n('file.toBeUpload').d('待上传')}) ` : ''}
+            {file.status === eUploadStatus.ready ? `(${i18n.$it('file.toBeUpload').d('待上传')}) ` : ''}
             <div className="upload-item-content" onClick={() => !!props.handlePreview && props.handlePreview(file)}>
               {scopeSlots.default({ item: file, index }, file.name)}
             </div>
@@ -366,8 +366,8 @@ export const Upload = designComponent({
     const singleRender = computed(() => <>
       {editComputed.value.editable && (
         <ButtonGroup>
-          <Button label={i18n('file.selectFile').d('选择文件')} icon="pi-file" onClick={methods.chooseFile}/>
-          {!props.autoUpload && <Button label={i18n('file.upload').d('上传')} icon="pi-upload" onClick={methods.upload}/>}
+          <Button label={i18n.$it('file.selectFile').d('选择文件')} icon="pi-file" onClick={methods.chooseFile}/>
+          {!props.autoUpload && <Button label={i18n.$it('file.upload').d('上传')} icon="pi-upload" onClick={methods.upload}/>}
           {slots.button()}
         </ButtonGroup>
       )}
@@ -378,8 +378,8 @@ export const Upload = designComponent({
         {!props.draggable ? (
           editComputed.value.editable && (
             <ButtonGroup>
-              <Button label={i18n('file.selectFile').d('选择文件')} icon="pi-file" onClick={methods.chooseFile}/>
-              {!props.autoUpload && <Button label={i18n('file.upload').d('上传')} icon="pi-upload" onClick={methods.upload}/>}
+              <Button label={i18n.$it('file.selectFile').d('选择文件')} icon="pi-file" onClick={methods.chooseFile}/>
+              {!props.autoUpload && <Button label={i18n.$it('file.upload').d('上传')} icon="pi-upload" onClick={methods.upload}/>}
               {slots.button()}
             </ButtonGroup>
           )
@@ -388,9 +388,9 @@ export const Upload = designComponent({
             <div className="upload-drop-area" onClick={methods.chooseFile} {...dropHandler}>
               <Icon icon="pi-share-external"/>
               <div>
-                <span>{i18n('file.dropFilesOr').d('拖拽文件至此处，或者')}</span>
+                <span>{i18n.$it('file.dropFilesOr').d('拖拽文件至此处，或者')}</span>
                 <Button mode="text" className="upload-drop-upload-button" onClick={methods.chooseFile}>
-                  <span>{i18n('file.clickToUpload').d('点击上传')}</span>
+                  <span>{i18n.$it('file.clickToUpload').d('点击上传')}</span>
                   <Icon icon="pi-upload"/>
                 </Button>
                 {slots.button()}

package/src/packages/components/VirtualTable/index.tsx

@@ -149,7 +149,7 @@ export const VirtualTable = designComponent({
               onScroll={handler.onScroll}
               scrollX
               className={virtual.classes.value}
-              horizontalScrollbarTooltip={i18n('table.tableScrollTips').d('推荐【表头使用鼠标滚轮】，或者【表体Alt键+鼠标滚轮】横向滚动')}
+              horizontalScrollbarTooltip={i18n.$it('table.tableScrollTips').d('推荐【表头使用鼠标滚轮】，或者【表体Alt键+鼠标滚轮】横向滚动')}
               disableTransitionWhenScroll={!props.disabled}
             >
               {{

package/src/packages/components/useDialog/DialogService.tsx

@@ -122,12 +122,12 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
         const head = () => (
           <div className="dialog-service-head">
             {!!targetOption.value.customOption.status && <Icon icon={ThemeStatusIcons[targetOption.value.customOption.status]}/>}
-            <span>{targetOption.value.dialogProps.title || i18n('base.defaultTitle').d('提示')}</span>
+            <span>{targetOption.value.dialogProps.title || i18n.$it('base.defaultTitle').d('提示')}</span>
           </div>
         );
         /*---------------------------------------foot-------------------------------------------*/
         const foot = () => !targetOption.value.dialogProps.confirmButton && !targetOption.value.dialogProps.cancelButton && (
-          <Button mode="fill" label={i18n('base.close').d('关闭')} onClick={hide} status={targetOption.value.customOption.status || undefined}/>
+          <Button mode="fill" label={i18n.$it('base.close').d('关闭')} onClick={hide} status={targetOption.value.customOption.status || undefined}/>
         );
         /*---------------------------------------default-------------------------------------------*/
         let defaultSlot = null as any;

package/src/packages/components/useImage/ImageService.tsx

@@ -91,7 +91,7 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
 
     const buttons = [
       {
-        label: i18n('image.rotation_90').d('逆时针旋转90°'),
+        label: i18n.$it('image.rotation_90').d('逆时针旋转90°'),
         icon: 'pi-rotate-left',
         onClick: () => {
           let { rotate } = state.adjust;
@@ -101,7 +101,7 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
         }
       },
       {
-        label: i18n('image.rotation90').d('顺时针旋转90°'),
+        label: i18n.$it('image.rotation90').d('顺时针旋转90°'),
         icon: 'pi-rotate-right',
         onClick: () => {
           let { rotate } = state.adjust;
@@ -111,7 +111,7 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
         }
       },
       {
-        label: i18n('base.zoomIn').d('放大'),
+        label: i18n.$it('base.zoomIn').d('放大'),
         icon: 'pi-zoom-in',
         onClick: () => {
           let { scale } = state.adjust;
@@ -119,7 +119,7 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
         }
       },
       {
-        label: i18n('base.zoomOut').d('缩小'),
+        label: i18n.$it('base.zoomOut').d('缩小'),
         icon: 'pi-zoom-out',
         onClick: () => {
           let { scale } = state.adjust;
@@ -127,7 +127,7 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
         }
       },
       {
-        label: i18n('image.prevPicture').d('上一张'),
+        label: i18n.$it('image.prevPicture').d('上一张'),
         icon: 'pi-left',
         show: () => isMultipleImages.value,
         onClick: () => {
@@ -138,7 +138,7 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
         },
       },
       {
-        label: i18n('image.nextPicture').d('下一张'),
+        label: i18n.$it('image.nextPicture').d('下一张'),
         icon: 'pi-right',
         show: () => isMultipleImages.value,
         onClick: () => {
@@ -149,12 +149,12 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
         },
       },
       {
-        label: i18n('base.reset').d('重置'),
+        label: i18n.$it('base.reset').d('重置'),
         icon: 'pi-sync',
         onClick: resetAdjust,
       },
       {
-        label: i18n('base.close').d('关闭'),
+        label: i18n.$it('base.close').d('关闭'),
         icon: 'pi-close',
         onClick: hide,
       },

package/src/packages/components/useNotice/index.tsx

@@ -14,7 +14,7 @@ export const useNotice = createApplicationService(
     const service = (sourceOption: string | iNoticeServiceOption, externalOption?: iNoticeServiceOption): () => void => {
       const option = formatOptions(sourceOption, externalOption);
       option.id = nextNoticeId();
-      if (option.title === undefined) {option.title = () => i18n('base.notice').d('提示');}
+      if (option.title === undefined) {option.title = () => i18n.$it('base.notice').d('提示');}
       if (option.time === undefined) {option.time = 3000;}
       if (option.status === undefined) {option.status = ThemeStatus.primary;}
       if (!!option.status && !option.icon) {option.icon = ThemeStatusIcons[option.status];}