br-dionysus 1.1.2 → 1.1.3

package/dist/packages/Hook/usePackageConfig/usePackageConfig.d.ts

@@ -0,0 +1,13 @@
+interface UsePackageConfig {
+    set: Function;
+    get: Function;
+}
+interface UsePackageConfigParameter {
+    setConfig?: Function;
+    getConfig?: Function;
+}
+/**
+ * @description 配置保存与获取
+ * */
+declare const usePackageConfig: ({ setConfig, getConfig }?: UsePackageConfigParameter) => UsePackageConfig;
+export default usePackageConfig;

package/dist/packages/Hook/useTableConfig/useTableConfig.d.ts

@@ -1,11 +1,4 @@
 import type { Ref } from 'vue';
-/** 页码配置 */
-export interface PageConfig {
-    /** 分页大小 */
-    pageSize: number;
-    /** 分页大小可选项 */
-    pageSizesOptions: number[];
-}
 /** 表格列配置(单个) */
 export interface TableConfigItem {
     /** 最小列宽 */

package/dist/packages/MTableColumn/src/MTableColumn.vue.d.ts

@@ -37,11 +37,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "onUpdate:filtersValue"?: ((...args: any[]) => any) | undefined;
 }, {
     children: PropChildren[];
+    filtersValue: FilterValue;
     filters: {
         text: string | number;
         value: string | number;
     }[];
-    filtersValue: FilterValue;
     filterMethod: Function;
 }, {}>, {
     default?(_: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "br-dionysus",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "scripts": {
     "dev": "vite --config ./build/base.config.ts",
     "build:doc": "vue-tsc --noEmit && vite build --config ./build/doc.config.ts && node script/copyDir.js",
@@ -32,6 +32,7 @@
     "@vue/eslint-config-prettier": "~8.0.0",
     "@vue/eslint-config-standard": "~8.0.1",
     "@vue/eslint-config-typescript": "~12.0.0",
+    "axios": "^1.7.0",
     "connect-history-api-fallback": "^2.0.0",
     "eslint": "~8.49.0",
     "eslint-plugin-cypress": "~2.15.1",

package/packages/Hook/usePackageConfig/README.md

@@ -0,0 +1,47 @@
+<script setup>
+import demo from './demo.vue'
+</script>
+
+配置保存与获取 hook
+=================
+
+### 1) 基础用法
+
+<Preview comp-name="usePackageConfig" demo-name="demo" is-hook>
+  <demo />
+</Preview>
+
+
+### 1) 所需参数
+
+| 名称         | 描述     | 类型           | 可选值 | 默认值 |
+|------------|--------|--------------|:---:|:---:|
+| name       | 表格唯一标识 | string       |  -  |  -  |
+| tableTitle | 列配置    | tableTitle[] |  -  |  -  |
+| tableData  | 表格数据   | ref<any[]>   |  -  |  -  |
+
+### 2) 返回值
+
+| 名称               | 描述      | 类型                                      |
+|------------------|---------|-----------------------------------------|
+| tableTitle       | 处理之后的表头 | TableTitle[]                            |
+| tableConfig      | 表头的配置项  | {  [propName: string]: TableConfigItem} |
+| headerDragend    | 表格拖拽事件  | function                                |
+| initColumnFilter | 列的筛选    | function                                |
+| filtersValue     | 过滤条件    | { [key: string]: Array<string,number>}  |
+
+### 3) TableTitle
+
+| 名称            | 描述                                                                   | 类型                                          |
+|---------------|----------------------------------------------------------------------|---------------------------------------------|
+| label         | 显示的标题                                                                | string                                      |
+| prop          | 字段对应列的字段名字也可以使用 property属性                                           | string                                      |
+| minWidth?     | 对应列的最小宽度与 width 的区别是 width 是固定的，min-width 会按比例分配剩余宽度                 | number ,string,                             |
+| className?    | 列的className                                                          | string                                      |
+| sortable      | 列是否能够排序 则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 */                   | Boolean                                     |
+| filters?      | 据过滤的选项， 数组格式，数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性 | {text:string,number,value:string,number} [] |
+| filterMethod? | 数据过滤使用的方法， 如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示                    | Function                                    |
+| headerAlign?  | 表头对齐方式， 若不设置该项，则使用表格的对齐方式                                            | 'left' , 'center' , 'right'                 |
+
+
+

package/packages/Hook/usePackageConfig/demo.vue

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <el-button @click="getConfig">获取config</el-button>
+    <el-button @click="setConfig">设置config</el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import usePackageConfig from 'packages/Hook/usePackageConfig/usePackageConfig'
+// import Axios from 'axios'
+// import { ElMessage } from 'element-plus'
+//
+// enum Method {
+//   GET = 'get',
+//   POST = 'post',
+// }
+//
+// type ajaxQuery = {
+//   base: {
+//     url: string,
+//     method: Method,
+//     baseUrl: string
+//   },
+//   data: {
+//     query?: any,
+//     body?: any,
+//     headers?: any,
+//     [key: string]: any
+//   }
+// }
+//
+// const token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjVXNlcklkIjoianlsIiwiY1Bzbl9OdW0iOiIiLCJzQWNjSWQiOiIxMDMiLCJzQWNjTmFtZSI6IlsxMDNd55WF5a6P55S15a2Q5LqL5Lia6YOoIiwiY0V4cGlyeSI6IjIwMjQtMDUtMjFUMDA6NTQ6MTYuNDgyNjQ4NiswODowMCIsImNVc2VyTmFtZSI6Imp5bCIsIkxvZ2luU3lzIjoxLCJMb2dpblRpbWUiOiIyMDI0LTA1LTIwVDE4OjU0OjE2LjQ4MjY0ODYrMDg6MDAiLCJDbGllbnRJZCI6InI4cXR5b0xFVzlvSkZfaHVQTmtrZCIsIktlZXBBbGl2ZVRpbWUiOiIwMDAxLTAxLTAxVDAwOjAwOjAwIiwiZXhwIjoxNzE2MjI0MDU2fQ.F7iyZJ2feGMpBC5rFUXngJvdAnp2hKj7Da0-iXRXL6I'
+// const ajax = (base: ajaxQuery['base'], data: ajaxQuery['data']): Promise<any> => {
+//   return new Promise((resolve, reject) => {
+//     Axios({
+//       baseURL: base.baseUrl || '',
+//       url: base.url,
+//       method: base.method,
+//       params: data.query || (base.method === Method.GET ? data : {}),
+//       data: data.body || (base.method === Method.POST ? data : {}),
+//       timeout: 1000 * 50,
+//       headers: {
+//         access_token: token
+//       }
+//     })
+//       .then((res: any) => {
+//         resolve(res.data)
+//       })
+//       .catch((err: any) => {
+//         reject(err.data)
+//         ElMessage.error('网络异常，请稍后再试!')
+//       })
+//   })
+// }
+//
+// interface PlatConfigSaveReqDto {
+//   /** @description ID修改时需传 */
+//   Id?: string;
+//   /** @description 配置的KEY */
+//   cKey: string;
+//   /** @description 配置名称 */
+//   cName?: string;
+//   /** @description 配置的JSON数据 */
+//   cData: string;
+//   /** @description 是否公共配置方案 */
+//   bPub?: boolean;
+//   /** @description 配置的账套号-不传默认当前登录所在账套，预留后期从一个账套复制到另一个账套 */
+//   AccId?: string;
+// }
+// /**
+//  * @description 保存
+//  * @param {PlatConfigSaveReqDto} data 请求参数
+//  * @returns {Promise<any>} ajax
+//  */
+// const postPlatconfigSave = (data: PlatConfigSaveReqDto): Promise<any> => {
+//   return ajax({
+//     baseUrl: 'http://192.168.3.25:10205/',
+//     url: '/platconfig/save',
+//     method: Method.POST
+//   }, data)
+// }
+//
+// interface QueryPlatConfigReqDto {
+//   /** @description 配置KEY */
+//   cKey: string;
+//   /** @description 是否公共方案 传 null 时先找个人 再找公共 */
+//   bPub?: boolean;
+// }
+// interface PlatconfigInfoResType {
+//   /** @description 操作结果类型 */
+//   code?: number | null;
+//   /** @description 获取 返回数据 */
+//   data: {
+//     /** @description ID修改时需传 */
+//     Id?: string;
+//     /** @description 配置的KEY */
+//     cKey?: string;
+//     /** @description 配置名称 */
+//     cName?: string;
+//     /** @description 配置的JSON数据 */
+//     cData?: string;
+//     /** @description 是否公共配置方案 */
+//     bPub?: boolean;
+//   };
+//   /** @description 获取 消息内容 */
+//   msg?: string;
+// }
+// /**
+//  * @description 明细
+//  * @param {QueryPlatConfigReqDto} data 请求参数
+//  * @returns {Promise<PlatconfigInfoResType>} ajax
+//  */
+// const postPlatconfigInfo = (data: QueryPlatConfigReqDto): Promise<PlatconfigInfoResType> => {
+//   return ajax({
+//     baseUrl: 'http://192.168.3.25:10205/',
+//     url: '/platconfig/info',
+//     method: Method.POST
+//   }, data)
+// }
+//
+// usePackageConfig({
+//   getConfig: (key: string = '', elName: string = '') => {
+//     console.log('sss')
+//     return 'test'
+//   },
+//   setConfig: (key: string = '', data: any) => {
+//   }
+// })
+const packageConfig = usePackageConfig()
+const getConfig = () => {
+  console.log('packageConfig.get()', packageConfig.get())
+}
+const setConfig = () => {}
+</script>
+
+<style lang="scss"></style>

package/packages/Hook/usePackageConfig/usePackageConfig.ts

@@ -0,0 +1,35 @@
+let setApiAjax: any = (key: string, data: any) => localStorage.setItem(key, JSON.stringify(data))
+let getApiAjax: any = (key: string) => JSON.parse(localStorage.getItem(key) || '{}')
+
+interface UsePackageConfig {
+  set: Function,
+  get: Function
+}
+
+interface UsePackageConfigParameter {
+  setConfig?: Function,
+  getConfig?: Function
+}
+
+/**
+ * @description 配置保存与获取
+ * */
+const usePackageConfig = ({ setConfig, getConfig }: UsePackageConfigParameter = {}): UsePackageConfig => {
+  if (setConfig) setApiAjax = setConfig
+  if (getConfig) getApiAjax = getConfig
+
+  const setConfigEvent = (key: string, value: any, elName: string) => {
+    return setApiAjax(key, value, elName)
+  }
+
+  const getConfigEvent = (key: string, elName: string) => {
+    return getApiAjax(key, elName)
+  }
+
+  return {
+    set: setConfigEvent,
+    get: getConfigEvent
+  }
+}
+
+export default usePackageConfig

package/packages/Hook/useTableConfig/useTableConfig.ts

@@ -1,13 +1,9 @@
-import { ref, watch, computed } from 'vue'
+import { ref, watch, computed, onMounted } from 'vue'
 import type { Ref } from 'vue'
 import { Page } from '../../typings/class'
-/** 页码配置 */
-export interface PageConfig {
-  /** 分页大小 */
-  pageSize: number
-  /** 分页大小可选项 */
-  pageSizesOptions: number[]
-}
+import usePackageConfig from 'packages/Hook/usePackageConfig/usePackageConfig'
+
+const packageConfig = usePackageConfig()
 
 /** 表格列配置(单个) */
 export interface TableConfigItem {
@@ -44,13 +40,18 @@ export interface FilterValue {
 const useTableConfig = (name: string, tableTitle: TableTitle[], tableData: Ref <any[]>) => {
   /** 表格列头 */
   const _tableTitle: Ref<TableTitle[]> = ref<TableTitle[]>([])
-  const tableConfig: Ref<TableConfig> = ref<TableConfig>(JSON.parse(localStorage.getItem('tableConfig' + name) || '{}'))
-  const pageConfig = JSON.parse(localStorage.getItem('tablePage' + name) || '{}')
+  // const tableConfig: Ref<TableConfig> = ref<TableConfig>(JSON.parse(localStorage.getItem('tableConfig' + name) || '{}'))
+  const tableConfig: Ref<TableConfig> = ref<TableConfig>(packageConfig.get('tableConfig' + name))
+  // const pageConfig = JSON.parse(localStorage.getItem('tablePage' + name) || '{}')
+  const pageConfig = packageConfig.get('tablePage' + name)
   const page = ref<Page>(new Page(pageConfig))
   /** 列筛选 */
   const filterMethod = (value: string, row: any, column: Column) => {
     return row[column.property] === value
   }
+  onMounted(async () => {
+
+  })
 
   /** 过滤条件 */
   const filtersValue = ref<FilterValue>({})
@@ -90,7 +91,8 @@ const useTableConfig = (name: string, tableTitle: TableTitle[], tableData: Ref <
     () => tableConfig.value,
     () => {
       syncTableTitle()
-      localStorage.setItem('tableConfig' + name, JSON.stringify(tableConfig.value))
+      // localStorage.setItem('tableConfig' + name, JSON.stringify(tableConfig.value))
+      packageConfig.set('tableConfig' + name, tableConfig.value)
     },
     { deep: true }
   )
@@ -98,7 +100,8 @@ const useTableConfig = (name: string, tableTitle: TableTitle[], tableData: Ref <
   watch(
     () => page.value,
     (item) => {
-      localStorage.setItem('tablePage' + name, JSON.stringify({ pageSize: item.pageSize, pageSizesOptions: item.pageSizesOptions }))
+      // localStorage.setItem('tablePage' + name, JSON.stringify({ pageSize: item.pageSize, pageSizesOptions: item.pageSizesOptions }))
+      packageConfig.set('tablePage' + name, { pageSize: item.pageSize, pageSizesOptions: item.pageSizesOptions })
     },
     { deep: true }
   )

package/packages/SkinConfig/src/useSkin.ts

@@ -1,6 +1,9 @@
 import { reactive } from 'vue'
 import { Size } from 'packages/typings/enum'
 import compareStructures from '../../../tool/compareStructures'
+import usePackageConfig from 'packages/Hook/usePackageConfig/usePackageConfig'
+
+const packageConfig = usePackageConfig()
 
 /**
  * @description 颜色计算
@@ -93,14 +96,17 @@ const useSkin = (): {
   }
 
   // 清洗数据
-  const skinConfigData = JSON.parse(localStorage.getItem('skinConfig') || '{}')
+  // const skinConfigData = JSON.parse(localStorage.getItem('skinConfig') || '{}')
+  const skinConfigData = packageConfig.get('skinConfig')
   // 数据结构不一致，既认为为不同版本需要清洗
   if (!compareStructures(skinConfigData, defaultSkinConfig)) {
-    localStorage.setItem('skinConfig', JSON.stringify(defaultSkinConfig))
+    // localStorage.setItem('skinConfig', JSON.stringify(defaultSkinConfig))
+    packageConfig.set('skinConfig', defaultSkinConfig)
   }
 
   /** 皮肤配置 */
-  const skinConfig: SkinConfig = reactive(JSON.parse(localStorage.getItem('skinConfig') as string))
+  // const skinConfig: SkinConfig = reactive(JSON.parse(localStorage.getItem('skinConfig') as string))
+  const skinConfig: SkinConfig = reactive(packageConfig.get('skinConfig'))
 
   /**
    * @description 设置皮肤色
@@ -211,7 +217,8 @@ const useSkin = (): {
    * @description 保存皮肤配置到本地
    */
   const save = () => {
-    localStorage.setItem('skinConfig', JSON.stringify(skinConfig))
+    // localStorage.setItem('skinConfig', JSON.stringify(skinConfig))
+    packageConfig.set('skinConfig', skinConfig)
   }
 
   return {

package/packages/list.json

@@ -64,5 +64,11 @@
     "compZhName": "对话框组件",
     "compDesc": "这是一个对话框组件",
     "compClassName": "m-dialog"
+  },
+  {
+    "compName": "usePackageConfig",
+    "compZhName": "配置保存与获取",
+    "compDesc": "这是一个配置保存与获取hook",
+    "compClassName": "usePackageConfig"
   }
 ]

package/src/App.vue

@@ -16,10 +16,22 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import ComponentList from 'packages/list.json'
 import { reactive } from 'vue'
 
+import usePackageConfig from 'packages/Hook/usePackageConfig/usePackageConfig'
+usePackageConfig({
+  getConfig: (key: string = '', elName: string = '') => {
+    return JSON.parse(localStorage.getItem(key) || '{}')
+  },
+  setConfig: (key: string = '', data: any, elName: string = '') => {
+    setTimeout(() => {
+      localStorage.setItem(key, JSON.stringify(data))
+    }, 1000)
+  }
+})
+
 const data = reactive({
   links: ComponentList.map(item => ({
     path: `/components/${item.compName}`,

package/src/components/Preview.vue

@@ -22,60 +22,45 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
 import Prism from 'prismjs'
 import '../assets/prism.css'
 
 const isDev = import.meta.env.MODE === 'development'
 
-export default {
-  props: {
-    /** 组件名称 */
-    compName: {
-      type: String,
-      default: '',
-      require: true
-    },
-    /** 要显示代码的组件 */
-    demoName: {
-      type: String,
-      default: '',
-      require: true
-    }
-  },
-  data () {
-    return {
-      sourceCode: '',
-      codeVisible: false
-    }
-  },
-  computed: {
-    previewSourceCode () {
-      return this.sourceCode.replace(/'\.\.\/\.\.\/index'/g, '\'@tencent/my-kit\'')
-    }
-  },
-  async mounted () {
-    if (this.compName && this.demoName) {
-      if (isDev) {
-        this.sourceCode = (
-          await import(/* @vite-ignore */ `../../packages/${this.compName}/docs/${this.demoName}.vue?raw`)
-        ).default
-      } else {
-        this.sourceCode = await fetch(`${isDev ? '' : '/MY-Kit'}/packages/${this.compName}/docs/${this.demoName}.vue`).then((res) => res.text())
-      }
-    }
-    await this.$nextTick()
-    Prism.highlightAll()
-  },
-  methods: {
-    async copyCode () {
-      // this.$copyText(this.sourceCode);
-    },
-    showSourceCode () {
-      this.codeVisible = !this.codeVisible
+const props = withDefaults(defineProps<{
+  /** 是否为hook */
+  isHook?: boolean,
+  compName?: string,
+  demoName: string
+}>(), {
+  isHook: false,
+  compName: '',
+  demoName: ''
+})
+
+const sourceCode = ref<string>('')
+const codeVisible = ref<boolean>(false)
+onMounted(async () => {
+  if (props.compName && props.demoName) {
+    const path = props.isHook ? `/packages/Hook/${props.compName}/${props.demoName}.vue` : `/packages/${props.compName}/docs/${props.demoName}.vue`
+    console.log('path', path)
+    if (isDev) {
+      sourceCode.value = (await import(path + '?raw')).default
+    } else {
+      sourceCode.value = await fetch(path).then((res) => res.text())
     }
   }
+  // await this.$nextTick()
+  Prism.highlightAll()
+})
+
+const showSourceCode = () => {
+  codeVisible.value = !codeVisible.value
 }
+
+const previewSourceCode = computed(() => sourceCode.value.replace(/'\.\.\/\.\.\/index'/g, '\'@tencent/\''))
 </script>
 
 <style lang="scss">
@@ -85,7 +70,6 @@ pre {
 .g-preview {
   border: 1px dashed #e7e7e7;
   padding: 10px;
-  border-bottom: 1px dashed #e7e7e7;
   section {
     margin: 15px;
   }

package/src/env.d.ts

@@ -9,3 +9,14 @@ declare module '*.md' {
   const Component: ComponentOptions
   export default Component
 }
+
+interface ImportMetaEnv {
+  readonly VITE_APP_TITLE: string,
+  readonly VITE_APP_LOGOTYPE: string,
+  readonly MODE: string,
+  // 更多环境变量...
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

package/src/global.d.ts

@@ -2,3 +2,4 @@
 declare module 'vue-router'
 declare module 'element-plus'
 declare module 'element-plus/dist/locale/zh-cn.mjs'
+declare module 'prismjs'

package/src/router.ts

@@ -60,6 +60,11 @@ const routes = [{
   name: 'MDialog',
   path: '/components/MDialog',
   component: () => import('packages/MDialog/docs/README.md')
+}, {
+  title: '配置保存与获取',
+  name: 'usePackageConfig',
+  path: '/components/usePackageConfig',
+  component: () => import('packages/Hook/usePackageConfig/README.md')
 }]
 
 const routerConfig = {

package/tags.json

@@ -1 +1 @@
-{"m-dialog":{"attributes":["modelValue","width","resize","draggable","resized"],"description":"这是一个MDialog"},"m-inline":{"attributes":["minWidth","maxWidth","size","switch"],"description":"这是一个MInline"},"m-input-number":{"attributes":["modelValue","placeholder","disabled","size","min","max","step","stepStrictly","thousandthPlace","noBorder","noSpacing","update:modelValue","change","focus","blur"],"description":"这是一个MInputNumber"},"m-option":{"attributes":[],"description":"这是一个MOption"},"m-select":{"attributes":["checkboxMode","multiple"],"description":"这是一个MSelect"},"m-select-table":{"attributes":["modelValue","placeholder","disabled","options","tableTitle","remoteMethod","allowCreate","focusShow","isSelect","clearable","size","labelKey","scrollbarAlwaysOn","total","update:modelValue","selectMultiple","change","selected","clear"],"description":"这是一个MSelectTable"},"m-select-v2":{"attributes":["checkboxMode","multiple","showAll","options","update:modelValue"],"description":"这是一个MSelectV2"},"m-table":{"attributes":["sole","data","filtersValue","pasteData"],"description":"这是一个MTable"},"m-table-column":{"attributes":["filtersValue","filters","filterMethod","children","update:filtersValue"],"description":"这是一个MTableColumn"},"m-table-column-set":{"attributes":["modelValue","foldMode","link","update:modelValue"],"description":"这是一个MTableColumnSet"},"skin-config":{"attributes":["change"],"description":"这是一个SkinConfig"},"tab-page":{"attributes":["modelValue","activeKey","showRightClickMenu","primaryColor","primaryBackgroundColor","close","click"],"description":"这是一个TabPage"}}
+{"demo":{"attributes":[],"description":"这是一个demo"},"m-dialog":{"attributes":["modelValue","width","resize","draggable","resized"],"description":"这是一个MDialog"},"m-inline":{"attributes":["minWidth","maxWidth","size","switch"],"description":"这是一个MInline"},"m-input-number":{"attributes":["modelValue","placeholder","disabled","size","min","max","step","stepStrictly","thousandthPlace","noBorder","noSpacing","update:modelValue","change","focus","blur"],"description":"这是一个MInputNumber"},"m-option":{"attributes":[],"description":"这是一个MOption"},"m-select":{"attributes":["checkboxMode","multiple"],"description":"这是一个MSelect"},"m-select-table":{"attributes":["modelValue","placeholder","disabled","options","tableTitle","remoteMethod","allowCreate","focusShow","isSelect","clearable","size","labelKey","scrollbarAlwaysOn","total","update:modelValue","selectMultiple","change","selected","clear"],"description":"这是一个MSelectTable"},"m-select-v2":{"attributes":["checkboxMode","multiple","showAll","options","update:modelValue"],"description":"这是一个MSelectV2"},"m-table":{"attributes":["sole","data","filtersValue","pasteData"],"description":"这是一个MTable"},"m-table-column":{"attributes":["filtersValue","filters","filterMethod","children","update:filtersValue"],"description":"这是一个MTableColumn"},"m-table-column-set":{"attributes":["modelValue","foldMode","link","update:modelValue"],"description":"这是一个MTableColumnSet"},"skin-config":{"attributes":["change"],"description":"这是一个SkinConfig"},"tab-page":{"attributes":["modelValue","activeKey","showRightClickMenu","primaryColor","primaryBackgroundColor","close","click"],"description":"这是一个TabPage"}}