@ebiz/designer-components 0.0.1-9.bata.1

package/src/utils/upload.ts

@@ -0,0 +1,126 @@
+import {request} from "./request";
+import COS from "cos-js-sdk-v5";
+import OSS from "ali-oss";
+import moment from "moment/moment";
+
+const defaultOnPercent = () => {
+}
+const defaultOnSuccess = () => {
+}
+const defaultOnFail = () => {
+}
+
+export const upload = (options: any) => {
+  const path: string = options.path;
+  const file: any = options.file;
+  const onPercent: Function = options.onProgress || defaultOnPercent;
+  const onSuccess: Function = options.onSuccess || defaultOnSuccess;
+  const onFail: Function = options.onFail || defaultOnFail;
+
+  let credentials: any, url;
+  request.get({
+    url: "/file/getSecretKey"
+  }).then((res) => {
+    if (res.oss_type === 'ALIYUN') {
+      const client = new OSS({
+        // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
+        region: res.region,
+        // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
+        accessKeyId: res.accessKeyId,
+        accessKeySecret: res.accessKeySecret,
+        // 从STS服务获取的安全令牌（SecurityToken）。
+        stsToken: res.securityToken,
+        // 刷新临时访问凭证的时间间隔，单位为毫秒。
+        refreshSTSTokenInterval: 300000,
+        // 填写Bucket名称。
+        bucket: res.bucket
+      });
+      const options = {
+        mime: "json",
+        headers: {"Content-Type": "text/plain"},
+      };
+      client.put(handleUploadName("img", path, file.name), file.raw, options).then((uploadRes: any) => {
+        console.log(uploadRes)
+        // 创建一个 URL 对象
+        const urlObj = new URL(uploadRes.url);
+        // 从 URL 对象中获取路径部分
+        const url = res.host + urlObj.pathname.substring(1);
+
+        request.get({
+          url: "/file/getAccessUrl",
+          params: {
+            url,
+          }
+        }).then(res => {
+          console.log(res)
+          onSuccess({url: res})
+        })
+      }).catch((e: any) => {
+        onFail(e)
+      });
+    } else {
+      credentials = res.credentials;
+      let cos = new COS({
+        getAuthorization: function (options, callback) {
+          callback({
+            TmpSecretId: credentials.tmpSecretId,
+            TmpSecretKey: credentials.tmpSecretKey,
+            SecurityToken: credentials.sessionToken,
+            StartTime: credentials.startTime,
+            ExpiredTime: credentials.expiredTime
+          });
+        }
+      });
+      cos.uploadFile(
+        {
+          Bucket: credentials.bucket,
+          Region: credentials.region,
+          Key: handleUploadName("img", path, file.name),
+          Body: file.raw,
+          SliceSize: 1024 * 1024 * 5 /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */,
+          onProgress: (progressData) => {
+            if (!!onPercent) {
+              onPercent({file, percent: progressData.percent});
+            }
+          },
+          onFileFinish: (err, data, options) => {
+            url = credentials.path + "/" + options.Key;
+            request.get({
+              url: "/file/getAccessUrl",
+              params: {
+                url,
+              }
+            }).then(res => {
+              console.log(res)
+              onPercent({file, percent: 100});
+              onSuccess({url: res})
+            })
+          }
+        },
+        function (err, data) {
+          onFail(err)
+        }
+      );
+    }
+
+  });
+}
+
+
+// 规范上传图片格式
+const handleUploadName = function (type: string, path: string, file_name: string) {
+  // /img/类型（avatar/category/article）/年月日/md5(文件名+随机字符串+毫秒数)+时间.文件后缀
+  let newFileName =
+    type +
+    '/' +
+    path +
+    '/' +
+    moment(new Date()).format('YYMMDD') +
+    '/' +
+    file_name.split(file_name.substring(file_name.lastIndexOf('.')))[0] +
+    Math.random().toString(36).substring(2) +
+    Date.now() +
+    moment(new Date()).format('HHmm') +
+    file_name.substring(file_name.lastIndexOf('.'));
+  return newFileName;
+};

package/src/utils/vue-sfc-validator.js

@@ -0,0 +1,155 @@
+/**
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+import { parse as parseSFC, compileScript, compileStyle, compileTemplate } from '@vue/compiler-sfc'
+import { generateCodeFrame } from '@vue/shared'
+import { randomString } from '.'
+
+/**
+ * 使用 vue-eslint-parser，校验 vue sfc 是否有效
+ * @param {string} code 源码
+ * @returns {Error[]} 校验出的报错信息
+ */
+export function validateByParse(code) {
+  const { parse: parseVue } = require('vue-eslint-parser')
+  let errors = []
+
+  try {
+    const { templateBody, errors: parseErrors } = parseVue(code, {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      ecmaFeatures: {
+        jsx: true
+      }
+    })
+    errors = templateBody?.errors || parseErrors || []
+  } catch (error) {
+    // 此处可捕获到 SyntaxError，如：嵌套双引号未转义的问题
+    errors.push(unify(error))
+  }
+
+  return errors.map(({ message, lineNumber: line, column }) => {
+    if (line && column) {
+      return locateErrorMessage(code, { message, loc: { start: { line, column } } })
+    }
+
+    return { message }
+  })
+}
+
+/**
+ * 使用 @vue/compiler-sfc， 校验 vue sfc 是否有效
+ * @param {string} filename 文件名称
+ * @param {string} code 源码
+ * @returns {Error[]} 校验出的错误信息
+ */
+export function validateByCompile(filename, code) {
+  // validate via parse
+  const { errors, descriptor } = parseSFC(code, {
+    filename,
+    sourceMap: false
+  })
+
+  if (errors.length) {
+    return errors.map((error) => locateErrorMessage(code, error))
+  }
+
+  const id = randomString()
+
+  // validate via compile script
+  let bindingMetadata
+  try {
+    const scriptResult = compileScript(descriptor, { id })
+    bindingMetadata = scriptResult.bindings
+  } catch (error) {
+    // error 可能的类型 string | ParseError (@babel/parser) | CompilerError (compileScript 使用 inlineTemplate 模式时)
+    const scriptError = unify(error)
+
+    // 如果是 ParseError 类型，转换为 locateErrorMessage 可接受的 CompilerError 类型传入
+    if (!scriptError?.loc?.start && scriptError?.loc?.line) {
+      // 只截取原 message 的第一行，后面行数可能已经包含错误的定位信息，避免拼接重复
+      const message = scriptError.message.match(/.*/)[0]
+      const { line, column } = scriptError.loc
+
+      // compileScript 内部抛错误时，可能已定位编译报错信息，但报错所在的行可能有大量字符，此处精简一下
+      return [locateErrorMessage(code, { message, loc: { start: { line, column } } })]
+    }
+
+    return [{ message: scriptError.message }]
+  }
+
+  // validate via compile template
+  const { styles, template, slotted } = descriptor
+  const scoped = styles.some((s) => s.scoped)
+
+  const templateResult = compileTemplate({
+    source: template.content,
+    filename,
+    id,
+    scoped,
+    slotted,
+    compilerOptions: { bindingMetadata }
+  })
+
+  if (templateResult.errors.length) {
+    return templateResult.errors.map(unify).map((error) => locateErrorMessage(code, error))
+  }
+
+  // validate via compile style
+  // 目前暂时没有预处理器，如：less
+  const stylesResult = styles.map(({ content, module }) =>
+    compileStyle({ source: content, filename, id, scoped, modules: Boolean(module) })
+  )
+  const errorsInStyles = stylesResult
+    .filter(({ errors }) => errors.length)
+    .map(({ errors }) => errors)
+    .flat()
+
+  return errorsInStyles
+}
+
+/**
+ * 统一报错的格式
+ * @param {(string | Error)} error 原始错误信息
+ * @returns {Error} 统一格式后的错误信息
+ */
+function unify(error) {
+  if (typeof error === 'string') {
+    return { message: error }
+  }
+
+  return error
+}
+
+/**
+ * 定位报错信息，如果包含报错位置，则追加到 message 中输出
+ * @param {string} originalSource 原始代码
+ * @param {(Error | CompilerError)} error 错误信息
+ * @returns {{message: string}} 可能包含报错位置的错误信息
+ */
+function locateErrorMessage(originalSource, error) {
+  let { loc, message } = error
+
+  if (loc?.start) {
+    const { line, column } = loc.start
+    const errorLineCode = originalSource.split(/\r?\n/)[line - 1]
+
+    // 源码字符串未经格式化，报错所在的行可能有大量字符，截取报错位置附近范围的错误信息，比如：前后 50 字符内
+    const SCOPE = 50
+    const scopeStartIndex = Math.max(0, column - SCOPE)
+    const scopeCode = errorLineCode.slice(scopeStartIndex, column + SCOPE)
+
+    message = `${message} \n ${generateCodeFrame(scopeCode, column - scopeStartIndex)}`
+  }
+
+  return { message }
+}

package/src/views/Button.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <ebiz-route-breadcrumb />
+    <ebiz-button :text="测试" :apiConfig="{ apiId: 802, apiType: 5 }" @prepare="onPrepare" />
+  </div>
+</template>
+
+<script>
+import { EbizButton } from '@/index.js'
+
+export default {
+  name: 'ButtonDemo',
+  components: {
+    EbizButton
+  },
+  methods: {
+    onPrepare() {
+      
+    }
+  }
+}
+</script>
+
+<style scoped></style>

package/src/views/CheckboxDemo.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="checkbox-demo">
+    <h2>多选框组件示例</h2>
+
+    <h3>基础多选框</h3>
+    <div class="demo-section">
+      <EbizCheckbox>未选中项</EbizCheckbox>
+      <EbizCheckbox v-model="checkbox1">选中项</EbizCheckbox>
+      <EbizCheckbox :disabled="true">未选禁用项</EbizCheckbox>
+      <EbizCheckbox v-model="checkboxDisabled" :disabled="true">选中禁用项</EbizCheckbox>
+    </div>
+
+    <h3>半选状态</h3>
+    <div class="demo-section">
+      <EbizCheckbox :indeterminate="true">半选状态</EbizCheckbox>
+    </div>
+
+    <h3>多选框组</h3>
+    <div class="demo-section">
+      <p>选中值：{{ groupValue }}</p>
+      <EbizCheckboxGroup v-model="groupValue" :options="options" @change="onGroupChange" />
+    </div>
+
+    <h3>全选功能</h3>
+    <div class="demo-section">
+      <p>选中值：{{ allCheckValue }}</p>
+      <EbizCheckboxGroup v-model="allCheckValue">
+        <EbizCheckbox :check-all="true" @change="onCheckAllChange">全选</EbizCheckbox>
+        <EbizCheckbox value="1">选项一</EbizCheckbox>
+        <EbizCheckbox value="2">选项二</EbizCheckbox>
+        <EbizCheckbox value="3">选项三</EbizCheckbox>
+      </EbizCheckboxGroup>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CheckboxDemo"
+}
+</script>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizCheckbox, EbizCheckboxGroup } from '../index.js';
+
+// 单个多选框状态
+const checkbox1 = ref(true);
+const checkboxDisabled = ref(true);
+
+// 多选框组的值
+const groupValue = ref(['option1']);
+
+// 多选框组的配置选项
+const options = [
+  { label: '选项一', value: 'option1' },
+  { label: '选项二', value: 'option2' },
+  { label: '选项三', value: 'option3', disabled: true }
+];
+
+// 多选框组的值变化事件
+const onGroupChange = (value, context) => {
+  console.log('选中值变化:', value);
+  console.log('上下文信息:', context);
+};
+
+// 全选功能的值
+const allCheckValue = ref(['1']);
+
+// 全选状态变化事件
+const onCheckAllChange = (checked) => {
+  if (checked) {
+    allCheckValue.value = ['1', '2', '3'];
+  } else {
+    allCheckValue.value = [];
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.checkbox-demo {
+  padding: 20px;
+
+  h2 {
+    margin-bottom: 20px;
+    font-size: 24px;
+  }
+
+  h3 {
+    margin: 20px 0 10px;
+    font-size: 18px;
+  }
+
+  .demo-section {
+    padding: 16px;
+    margin-bottom: 16px;
+    border: 1px solid #eee;
+    border-radius: 4px;
+
+    .t-checkbox {
+      margin-right: 16px;
+    }
+  }
+}
+</style> 

package/src/views/DataContainer.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <ebiz-route-breadcrumb />
+    <ebiz-data-container />
+  </div>
+</template>
+
+<script>
+import { EbizDataContainer } from '@/index.js'
+
+export default {
+  name: 'DataContainerDemo',
+  components: {
+    EbizDataContainer
+  }
+}
+</script>
+
+<style scoped>
+</style> 

package/src/views/DialogDemo.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="dialog-demo">
+    <h1>TDesign Dialog 组件示例</h1>
+
+    <h2>基础对话框</h2>
+    <div class="demo-section">
+      <EbizButton theme="primary" @click="showBasicDialog = true">打开基础对话框</EbizButton>
+      <EbizDialog v-model:visible="showBasicDialog" header="基础对话框" :body="'这是一个基础对话框，用于展示简单的信息或进行简单的操作。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+    </div>
+
+    <h2>不同模式的对话框</h2>
+    <div class="demo-section">
+      <EbizButton @click="showModalDialog = true" style="margin-right: 16px;">模态对话框</EbizButton>
+      <EbizButton @click="showModelessDialog = true" style="margin-right: 16px;">非模态对话框</EbizButton>
+      <EbizButton @click="showFullscreenDialog = true">全屏对话框</EbizButton>
+
+      <!-- 模态对话框 -->
+      <EbizDialog v-model:visible="showModalDialog" header="模态对话框" mode="modal" :body="'模态对话框会阻止用户与页面的其他部分交互，直到对话框关闭。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+
+      <!-- 非模态对话框 -->
+      <EbizDialog v-model:visible="showModelessDialog" header="非模态对话框" mode="modeless"
+        :body="'非模态对话框不会阻止用户与页面的其他部分交互，可以同时进行其他操作。'" :confirm-btn="{ content: '确认', theme: 'primary' }"
+        cancel-btn="取消" />
+
+      <!-- 全屏对话框 -->
+      <EbizDialog v-model:visible="showFullscreenDialog" header="全屏对话框" mode="full-screen"
+        :body="'全屏对话框会占据整个屏幕，通常用于需要用户完全专注于某项任务的场景。'" :confirm-btn="{ content: '确认', theme: 'primary' }"
+        cancel-btn="取消" />
+    </div>
+
+    <h2>自定义内容的对话框</h2>
+    <div class="demo-section">
+      <EbizButton @click="showCustomDialog = true">打开自定义内容对话框</EbizButton>
+      <EbizDialog v-model:visible="showCustomDialog" header="自定义内容" :width="500">
+        <template #body>
+          <div style="padding: 20px;">
+            <h3>这是自定义的内容区域</h3>
+            <p>可以在这里放置任何你想要展示的内容，包括表单、图表、列表等。</p>
+            <div style="margin-top: 20px;">
+              <EbizTdesignInput v-model="customInput" placeholder="请输入内容" />
+            </div>
+          </div>
+        </template>
+        <template #footer>
+          <div style="display: flex; justify-content: flex-end;">
+            <EbizButton @click="showCustomDialog = false" style="margin-right: 8px;">取消</EbizButton>
+            <EbizButton theme="primary" @click="handleCustomConfirm">确认</EbizButton>
+          </div>
+        </template>
+      </EbizDialog>
+    </div>
+
+    <h2>可拖拽的对话框</h2>
+    <div class="demo-section">
+      <EbizButton @click="showDraggableDialog = true">打开可拖拽对话框</EbizButton>
+      <EbizDialog v-model:visible="showDraggableDialog" header="可拖拽对话框" :draggable="true" :body="'这个对话框可以通过拖拽标题栏进行移动。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+    </div>
+
+    <h2>不同位置的对话框</h2>
+    <div class="demo-section">
+      <EbizButton @click="showTopDialog = true" style="margin-right: 16px;">顶部对话框</EbizButton>
+      <EbizButton @click="showCenterDialog = true">居中对话框</EbizButton>
+
+      <!-- 顶部对话框 -->
+      <EbizDialog v-model:visible="showTopDialog" header="顶部对话框" placement="top" :body="'这个对话框位于顶部。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+
+      <!-- 居中对话框 -->
+      <EbizDialog v-model:visible="showCenterDialog" header="居中对话框" placement="center" :body="'这个对话框位于页面中央。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizDialog, EbizButton, EbizTdesignInput } from '../index.js';
+
+// 基础对话框
+const showBasicDialog = ref(false);
+
+// 不同模式的对话框
+const showModalDialog = ref(false);
+const showModelessDialog = ref(false);
+const showFullscreenDialog = ref(false);
+
+// 自定义内容的对话框
+const showCustomDialog = ref(false);
+const customInput = ref('');
+
+// 可拖拽的对话框
+const showDraggableDialog = ref(false);
+
+// 不同位置的对话框
+const showTopDialog = ref(false);
+const showCenterDialog = ref(false);
+
+// 自定义确认处理函数
+const handleCustomConfirm = () => {
+  // 在实际应用中，这里可以添加表单验证或数据处理逻辑
+  console.log('自定义确认按钮点击，输入内容：', customInput.value);
+  showCustomDialog.value = false;
+};
+</script>
+
+<style lang="less" scoped>
+.dialog-demo {
+  padding: 20px;
+  
+  h1 {
+    margin-bottom: 20px;
+  }
+  
+  h2 {
+    margin-top: 30px;
+    margin-bottom: 16px;
+  }
+  
+  .demo-section {
+    margin-bottom: 24px;
+  }
+}
+</style>