refactor(架构调整): 调整tag buildProps等输出

internal/build/src/build-info.ts

@@ -5,7 +5,7 @@ import { epOutput } from '@kankan-components/build-utils'
 import type { ModuleFormat } from 'rollup'
 
 export const modules = ['esm', 'cjs'] as const
-export type Module = typeof modules[number]
+export type Module = (typeof modules)[number]
 export interface BuildInfo {
     module: 'ESNext' | 'CommonJS'
     format: ModuleFormat

package.json

@@ -32,50 +32,52 @@
     },
     "dependencies": {
         "@kankan-components/components": "workspace:*",
+        "@kankan-components/constants": "workspace:*",
         "@kankan-components/hooks": "workspace:*",
         "@kankan-components/theme-chalk": "workspace:*",
         "@kankan-components/tokens": "workspace:*",
         "@kankan-components/utils": "workspace:*",
-        "@vueuse/core": "^9.1.0",
+        "@vueuse/core": "^9.12.0",
         "lodash": "^4.17.21",
         "lodash-es": "^4.17.21",
-        "lodash-unified": "^1.0.2"
+        "lodash-unified": "^1.0.3",
+        "vue": "^3.2.47"
     },
     "devDependencies": {
-        "@changesets/cli": "^2.24.4",
-        "@commitlint/cli": "^17.1.2",
+        "@changesets/cli": "^2.26.0",
+        "@commitlint/cli": "^17.4.2",
         "@kankan-components/build": "workspace:*",
         "@kankan-components/build-utils": "workspace:*",
         "@kankan-components/eslint-config": "workspace:*",
-        "@pnpm/find-workspace-packages": "^4.0.16",
+        "@pnpm/find-workspace-packages": "^4.0.43",
         "@pnpm/logger": "^4.0.0",
-        "@pnpm/types": "^8.4.0",
+        "@pnpm/types": "^8.10.0",
         "@types/fs-extra": "^9.0.13",
-        "@types/gulp": "^4.0.9",
-        "@types/jsdom": "^16.2.14",
-        "@types/node": "*",
+        "@types/gulp": "^4.0.10",
+        "@types/jsdom": "^16.2.15",
+        "@types/node": "^18.11.18",
         "@types/sass": "^1.43.1",
-        "@typescript-eslint/eslint-plugin": "^5.38.1",
-        "@vitejs/plugin-vue": "^3.1.0",
-        "@vitejs/plugin-vue-jsx": "^2.0.1",
-        "@vue/test-utils": "^2.0.2",
-        "commitizen": "^4.2.5",
+        "@typescript-eslint/eslint-plugin": "^5.50.0",
+        "@vitejs/plugin-vue": "^3.2.0",
+        "@vitejs/plugin-vue-jsx": "^2.1.1",
+        "@vue/test-utils": "^2.2.10",
+        "commitizen": "^4.3.0",
         "commitlint-config-cz": "^0.13.3",
-        "concurrently": "^7.2.2",
+        "concurrently": "^7.6.0",
         "cz-customizable": "^7.0.0",
         "eslint": "~8.23.1",
-        "eslint-config-prettier": "^8.5.0",
-        "eslint-define-config": "^1.7.0",
+        "eslint-config-prettier": "^8.6.0",
+        "eslint-define-config": "^1.15.0",
         "eslint-plugin-import": "~2.26.0",
         "eslint-plugin-jest": "^25.7.0",
         "eslint-plugin-prettier": "^4.2.1",
         "eslint-plugin-vue": "^8.7.1",
-        "husky": "^8.0.1",
-        "jest": "^29.0.3",
+        "husky": "^8.0.3",
+        "jest": "^29.4.1",
         "jsdom": "16.4.0",
-        "lint-staged": "^13.0.3",
+        "lint-staged": "^13.1.0",
         "resize-observer-polyfill": "^1.5.1",
-        "sass": "^1.53.0",
+        "sass": "^1.58.0",
         "typescript": "~4.7.4",
         "unplugin-vue-components": "^0.20.1",
         "unplugin-vue-macros": "^0.11.2",

packages/components/advance/tag/index.ts

@@ -1,6 +1,8 @@
 import { withInstall } from '@kankan-components/utils'
-import tags from './src/Tags.vue'
+import tags from './src/tag.vue'
 
 export const UITag = withInstall(tags)
 
 export default UITag
+export * from './src/tag'
+export * from './src/tagItem'

packages/components/advance/tag/src/showTag.vue

@@ -15,43 +15,17 @@
     </div>
 </template>
 <script lang="ts">
-import { type PropType, defineComponent } from 'vue'
-import { buildProps } from '@kankan-components/utils'
+import { defineComponent } from 'vue'
+
 import MetasImage from './metas/metasImage.vue'
 import MetasVideo from './metas/metasVideo.vue'
 // import demo from './metas/demo.vue'
-
-const props = buildProps({
-    id: {
-        type: String,
-        default: '',
-        required: true,
-    },
-    title: {
-        type: String,
-        default: '',
-        required: true,
-    },
-    type: {
-        type: String as PropType<TagType>,
-        default: '',
-        required: true,
-    },
-    media: {
-        type: Object as PropType<TagContent['media']>,
-        default: null,
-    },
-    content: {
-        type: String,
-        default: '',
-        required: true,
-    },
-})
+import { tagItemProps } from './tagItem'
 
 export default defineComponent({
     name: 'UIShowTag',
     components: { MetasImage, MetasVideo },
-    props,
+    props: tagItemProps,
     setup(props) {
         console.log('')
     },

packages/components/advance/tag/src/tag.ts

@@ -0,0 +1,45 @@
+import { buildProps } from '@kankan-components/utils'
+import type { ExtractPropTypes, PropType } from 'vue'
+import type { TagItemType } from './tagItem'
+type SourceType = {
+    src: string
+}
+
+export interface Tag {
+    content: string
+    createTime: EpochTimeStamp
+    floorIndex: number
+    icon: string
+    panoId: string
+    position: {
+        x: number
+        y: number
+        z: number
+    }
+    media: {
+        image?: SourceType[]
+        video?: SourceType[]
+    }
+    sid: string
+    title: string
+    type: TagItemType
+    visible: boolean
+    x: number
+    y: number
+    visiblePanos?: any[]
+}
+
+export const tagProps = buildProps({
+    tag: {
+        type: Object as PropType<Tag>,
+        required: true,
+    },
+} as const)
+export type TagProps = ExtractPropTypes<typeof tagProps>
+
+export const tagEmits = {
+    click: () => true,
+    mouseEnter: () => true,
+    mouseLeave: () => true,
+}
+export type TagEmits = typeof tagEmits

packages/components/advance/tag/src/Tags.vue

@@ -1,19 +1,16 @@
 <script setup lang="ts">
-import { type PropType, ref, useSlots } from 'vue'
+import { ref, useSlots } from 'vue'
 import ShowTag from './showTag.vue'
+import { tagProps } from './tag'
 
-const props = defineProps({
-    tag: {
-        type: Object as PropType<TagContent>,
-        required: true,
-    },
-})
+const props = defineProps(tagProps)
 const slots = useSlots()
 
 const emit = defineEmits(['click', 'mouseEnter', 'mouseLeave'])
 
 const isShow = ref<boolean>(false)
 const isClick = ref<boolean>(false)
+
 const handleMouseEnter = (event: MouseEvent, tag: any, index?: number | undefined) => {
     // console.log('in', event)
     isShow.value = true

packages/components/advance/tag/src/tagItem.ts

@@ -0,0 +1,33 @@
+import { buildProps } from '@kankan-components/utils'
+import type { ExtractPropTypes, PropType } from 'vue'
+import type { Tag } from './tag'
+
+export type TagItemType = 'image' | 'video' | 'link'
+
+export const tagItemProps = buildProps({
+    id: {
+        type: String,
+        default: '',
+        required: true,
+    },
+    title: {
+        type: String,
+        default: '',
+        required: true,
+    },
+    type: {
+        type: String as PropType<TagItemType>,
+        default: '',
+        required: true,
+    },
+    media: {
+        type: Object as PropType<Tag['media']>,
+        default: null,
+    },
+    content: {
+        type: String,
+        default: '',
+        required: true,
+    },
+} as const)
+export type TagItemProps = ExtractPropTypes<typeof tagItemProps>

packages/components/advance/tag/src/tagItem.vue

@@ -0,0 +1,187 @@
+<template>
+    <div :id="`tagBox_${id}`" class="show-tag">
+        <div class="tag-title">
+            <h2>
+                {{ title }}
+            </h2>
+        </div>
+        <div class="desc">
+            <div class="text" v-html="content" />
+        </div>
+        <div class="tag-metas">
+            <metasImage v-if="type == 'image'" :data="media.image" />
+            <MetasVideo v-if="type == 'video'" :data="media.video" />
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import MetasImage from './metas/metasImage.vue'
+import MetasVideo from './metas/metasVideo.vue'
+import { tagItemProps } from './tagItem'
+// import demo from './metas/demo.vue'
+
+export default defineComponent({
+    name: 'UIShowTag',
+    components: { MetasImage, MetasVideo },
+    props: tagItemProps,
+    setup(props) {
+        console.log('')
+    },
+})
+</script>
+
+<!-- <style lang="scss" scoped>
+.show-tag {
+    pointer-events: auto;
+    background: rgba(27, 27, 28, 0.8);
+    border-radius: 4px;
+    // border: 1px solid #000000;
+    // backdrop-filter: blur(4px);
+    min-width: 400px;
+    // min-height: 100px;
+    padding: 30px 20px;
+    max-height: 50vh;
+    overflow-y: auto;
+    .edit-btn {
+        margin-top: 20px;
+        text-align: right;
+        span {
+            font-size: 14px;
+            color: var(--editor-font-color);
+            cursor: pointer;
+            &:hover {
+                color: #fff;
+            }
+        }
+    }
+    .tag-metas {
+        width: 100%;
+        height: 224px;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 4px;
+        overflow: hidden;
+        position: relative;
+        cursor: -webkit-zoom-in;
+        margin-top: 20px;
+        &.nocursor {
+            cursor: auto;
+        }
+        &.mask {
+            &::after {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                z-index: 100;
+            }
+        }
+    }
+    .tag-title {
+        word-break: break-all;
+        h2 {
+            font-size: 20px;
+            // margin-bottom: 10px;
+            line-height: 30px;
+            color: #ffffff;
+            position: relative;
+            .ui-audio {
+                float: right;
+                &.audio {
+                    display: inline-block;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+    .desc {
+        margin-top: 10px;
+        .text {
+            font-size: 14px;
+            color: #999999;
+            line-height: 20px;
+            text-align: justify;
+            word-break: break-all;
+        }
+    }
+}
+[is-mobile] {
+    .show-tag {
+        pointer-events: auto;
+        background: rgba(27, 27, 28, 0.8);
+        border-radius: 0.0533rem;
+        // border: 1px solid #000000;
+        // backdrop-filter: blur(0.0533rem);
+        min-width: 7.4667rem;
+        // min-height: 4rem;
+        padding: 0.4rem 0.2667rem;
+
+        .edit-btn {
+            margin-top: 0.2667rem;
+            text-align: right;
+            span {
+                font-size: 0.1867rem;
+                color: var(--editor-font-color);
+                cursor: pointer;
+                &:hover {
+                    color: #fff;
+                }
+            }
+        }
+        .tag-metas {
+            width: 100%;
+            height: 4.2667rem;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 0.0533rem;
+            overflow: hidden;
+            position: relative;
+            cursor: -webkit-zoom-in;
+            margin-top: 0.4rem;
+            &.mask {
+                &::after {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    z-index: 100;
+                }
+            }
+        }
+        .tag-title {
+            h2 {
+                font-size: 0.5333rem;
+                line-height: 0.8rem;
+                color: #ffffff;
+                position: relative;
+                .ui-audio {
+                    float: right;
+                    &.audio {
+                        display: inline-block;
+                        cursor: pointer;
+                    }
+                }
+            }
+        }
+        .desc {
+            margin-bottom: 0.2933rem;
+
+            .text {
+                font-size: 0.3733rem;
+                color: #999999;
+                line-height: 0.2533rem;
+                text-align: justify;
+                line-height: 0.5333rem;
+
+                p {
+                    line-height: 0.5333rem;
+                }
+            }
+        }
+    }
+}
+</style> -->

packages/constants/date.ts

@@ -2,4 +2,4 @@ export const datePickTypes = ['year', 'month', 'date', 'dates', 'week', 'datetim
 
 export const WEEK_DAYS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'] as const
 
-export type DatePickType = typeof datePickTypes[number]
+export type DatePickType = (typeof datePickTypes)[number]

packages/constants/size.ts

@@ -1,6 +1,6 @@
 export const componentSizes = ['', 'default', 'small', 'large'] as const
 
-export type ComponentSize = typeof componentSizes[number]
+export type ComponentSize = (typeof componentSizes)[number]
 
 export const componentSizeMap = {
     large: 40,

tsconfig.play.json

@@ -12,6 +12,7 @@
         // playground
         "playground/main.ts",
         "playground/env.d.ts",
-        "playground/src/**/*"
+        "playground/src/**/*",
+        "tag.d.ts.bk"
     ]
 }

tsconfig.vitest.json

@@ -6,6 +6,6 @@
         "types": ["node", "jsdom", "unplugin-vue-macros/macros-global"],
         "skipLibCheck": true
     },
-    "include": ["packages", "vitest.setup.ts", "typings/env.d.ts"],
+    "include": ["packages", "vitest.setup.ts", "typings/env.d.ts", "tag.d.ts.bk"],
     "exclude": ["node_modules", "dist", "**/*.md"]
 }

tsconfig.web.json

@@ -7,7 +7,7 @@
         "types": ["unplugin-vue-macros/macros-global"],
         "skipLibCheck": true
     },
-    "include": ["packages", "typings/components.d.ts", "typings/env.d.ts", "typings/index.d.ts"],
+    "include": ["packages", "typings/components.d.ts", "typings/env.d.ts", "typings/index.d.ts", "tag.d.ts.bk", "tag.d.ts.bk"],
     "exclude": ["node_modules", "**/dist", "**/__tests__/**/*", "**/gulpfile.ts", "**/test-helper", "packages/test-utils", "**/*.md"]
 }
 //