rexma-design 1.0.0 → 1.0.2

package/components/xh-upload/declaration.ts

@@ -0,0 +1,6 @@
+export type UploadType = 'image' | 'video' | 'file';
+
+export type IModelValue = {
+  url: string;
+  [key: string]: any;
+};

package/components/xh-upload/index.scss

@@ -0,0 +1,37 @@
+$prefix: 'xh-upload';
+
+.#{$prefix} {
+  position: relative;
+  width: 156rpx;
+  height: 156rpx;
+  background: rgba(0, 0, 0, 0.02);
+  border-radius: 8rpx;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed #d9d9d9;
+
+  &-title {
+    margin-top: 12rpx;
+    font-size: 24rpx;
+    color: #999;
+    line-height: 34rpx;
+  }
+
+  &-extra {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.extra-bg {
+      background: rgba(0, 0, 0, 0.4);
+    }
+  }
+}

package/components/xh-upload/utils/index.ts

@@ -0,0 +1,32 @@
+import type { UploadType } from '../declaration';
+import xh from '../../../utils/xh';
+
+/**
+ * @description 选择客户端文件
+ */
+export function clientChooseFile(type: UploadType): Promise<any[]> {
+  return new Promise((resolve) => {
+    if (['image', 'image-camera'].includes(type)) {
+      xh.chooseImage({
+        success(res) {
+          resolve(res?.list || []);
+        },
+      });
+    }
+    if (type === 'video') {
+      xh.chooseVideo({
+        success(res) {
+          resolve([res]);
+        },
+      });
+    }
+    if (type === 'file') {
+      xh.chooseFile({
+        // isMultiple: Number(maxLength > 1),
+        success(res) {
+          resolve(res?.data);
+        },
+      });
+    }
+  });
+}

package/components/xh-upload/xh-upload.vue

@@ -0,0 +1,102 @@
+<template>
+  <view class="xh-upload" @click="onXhUploadClick">
+    <block v-if="uploading">
+      <wd-loading size="48rpx" v-if="uploading" />
+      <text class="xh-upload-title">上传中</text>
+    </block>
+    <block v-else>
+      <block v-if="props.modelValue?.url">
+        <image
+          :src="props.modelValue.url"
+          mode="aspectFit"
+          style="width: 100%; height: 100%"
+        ></image>
+      </block>
+      <block v-else>
+        <wd-icon name="add" size="40rpx" color="#999"></wd-icon>
+        <text class="xh-upload-title">{{ title }}</text>
+      </block>
+    </block>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { UploadType, IModelValue } from './declaration';
+import xh from '../../utils/xh';
+import XinhuaClient from '../../utils/XinhuaClient';
+import { clientChooseFile } from './utils';
+
+type IXhUploadProps = {
+  /** 标题 */
+  title?: string;
+  /** 允许上传的文件类型 */
+  acceptFileType?: UploadType | UploadType[] | Partial<Record<UploadType, string[]>>;
+  /** 上传接口请求配置 */
+  requestConfig: {
+    /** 接口地址 */
+    url: string;
+    /** 字段名称 */
+    name?: string;
+    /** 其他请求参数 */
+    params?: Record<string, any>;
+  };
+  /** 格式化上传结果 */
+  formatResponse: (res: any) => IModelValue;
+  /** 是否需要加签 */
+  requestSign?: boolean;
+  /** 值 */
+  modelValue?: IModelValue;
+};
+
+const props = withDefaults(defineProps<IXhUploadProps>(), {
+  title: '上传图片',
+  acceptFileType: () => ['image'],
+  requestSign: true,
+});
+const emit = defineEmits(['update:modelValue']);
+
+const uploading = ref(false);
+
+function onXhUploadClick() {
+  if (!props.acceptFileType) {
+    return;
+  }
+  if (typeof props.acceptFileType === 'string') {
+    onChooseFile(props.acceptFileType);
+    return;
+  }
+  if (props.acceptFileType instanceof Array) {
+    if (props.acceptFileType.length === 1) {
+      onChooseFile(props.acceptFileType[0]);
+    } else {
+      // todo: 展示选择弹窗
+    }
+    return;
+  }
+  // todo: 对象配置
+}
+
+async function onChooseFile(fileType: UploadType) {
+  const chooseList = await clientChooseFile(fileType);
+  uploading.value = true;
+  let signParams = props.requestConfig.params;
+  if (props.requestSign) {
+    signParams = await XinhuaClient.getSignRequestParams(props.requestConfig.params || {});
+  }
+  xh.uploadFile({
+    url: props.requestConfig.url,
+    name: props.requestConfig.name || 'file',
+    params: signParams,
+    files: chooseList?.map((item) => item.path),
+    success: (res) => {
+      const uploadRes = props.formatResponse(res);
+      emit('update:modelValue', uploadRes);
+      uploading.value = false;
+    },
+  });
+}
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/index.ts

@@ -1 +1,3 @@
 export { default as XinhuaClient } from './utils/XinhuaClient/index';
+
+export { default as XhUpload } from './components/xh-upload/xh-upload.vue';

package/package.json

@@ -2,12 +2,14 @@
   "id": "rexma-design",
   "name": "rexma-design",
   "displayName": "rexma-design",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "rexma-design",
   "author": "mqyun",
   "keywords": [
     "rexma-design"
   ],
+  "main": "index.ts",
+  "module": "index.ts",
   "repository": "",
   "engines": {
     "HBuilderX": "^3.1.0"
@@ -83,7 +85,8 @@
     }
   },
   "peerDependencies": {
-    "rexma-cli": "*"
+    "rexma-cli": "*",
+    "wot-design-uni": "*"
   },
   "dependencies": {
     "crypto-js": "^4.2.0"

package/utils/XinhuaClient/declaration.ts

@@ -21,5 +21,8 @@ export type IXinhuaClientInitOptions = {
     offset: string;
     moduleCode?: string;
   };
+  /** 本地运行时的全局状态（仅浏览器环境生效） */
   developmentState?: IXinhuaClientState;
+  /** 配置该项后，本地环境 developmentState 在客户端也生效 */
+  clientDebug?: boolean;
 };

package/utils/XinhuaClient/index.ts

@@ -34,7 +34,7 @@ class XinhuaClient {
         ...initOptions.developmentState,
       };
     }
-    if (xh.isMediaConvergenceXinhuaApp()) {
+    if (xh.isMediaConvergenceXinhuaApp() && !initOptions.clientDebug) {
       // 客户端环境
       this.state.siteId = getValueFromUA('currentSiteId');
       this.state.userId = getValueFromUA('userId');