@ebiz/designer-components 0.1.2 → 0.1.5

package/src/components/EbizOkrTree.vue

@@ -1,99 +1,99 @@
-<template>
-    <div>
-        123412
-        <!-- <VueOkrTree :data="calcData" showNodeNum :defaultExpandAll="defaultExpanded" :showCollapsable="showCollapsable"
-            :direction="horizontal ? 'horizontal' : 'vertical'" :label-class-name="formatClass"
-            :renderContent="renderContent" @node-click="nodeClick" /> -->
-    </div>
-
-</template>
-
-<script setup>
-import { h, ref } from 'vue';
-// import { VueOkrTree } from 'vue-okr-tree-vue3';
-// import 'vue-okr-tree-vue3/dist/vue-okr-tree.css';
-
-const props = defineProps({
-    // 数据源
-    data: {
-        type: Array,
-        default: () => []
-    },
-    // 是否默认展开
-    defaultExpanded: {
-        type: Boolean,
-        default: true
-    },
-    // 是否显示折叠按钮
-    showCollapsable: {
-        type: Boolean,
-        default: true
-    },
-    // 是否水平
-    horizontal: {
-        type: Boolean,
-        default: false
-    },
-    // 节点文本key
-    labelKey: {
-        type: String,
-        default: 'label'
-    },
-    // 子节点key   
-    childrenKey: {
-        type: String,
-        default: 'children'
-    },
-    // 圆角的判定key
-    circleKey: {
-        type: String,
-        default: 'isCircle'
-    },
-    // 二级文本内容key
-    contentKey: {
-        type: String,
-        default: 'content'
-    }
-
-})
-
-const calcData = computed(() => props.data.map(item => ({
-    label: item[props.labelKey],
-    isCircle: item[props.circleKey],
-    content: item[props.contentKey],
-    children: item[props.childrenKey]
-})))
-
-const emit = defineEmits(['nodeClick']);
-
-const formatClass = (node) => node.data.isCircle ? 'okrTreeCircle' : '';
-
-const renderContent = (e) => h('div', { class: 'okrTreeDiv' }, [
-    h('div', e.node.data.label),
-    h('div', { class: 'okrTreeContent' }, e.node.data.content)
-])
-
-const nodeClick = (e) => {
-    emit('nodeClick', e);
-}
-
-</script>
-
-<style>
-.okrTreeCircle {
-    padding: 5px 20px !important;
-    border-radius: 34px;
-}
-
-.okrTreeDiv {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
-.okrTreeContent {
-    font-size: 14px;
-    color: #666;
-}
-</style>
+<template>
+    <div>
+        123412
+        <!-- <VueOkrTree :data="calcData" showNodeNum :defaultExpandAll="defaultExpanded" :showCollapsable="showCollapsable"
+            :direction="horizontal ? 'horizontal' : 'vertical'" :label-class-name="formatClass"
+            :renderContent="renderContent" @node-click="nodeClick" /> -->
+    </div>
+
+</template>
+
+<script setup>
+import { h, ref } from 'vue';
+// import { VueOkrTree } from 'vue-okr-tree-vue3';
+// import 'vue-okr-tree-vue3/dist/vue-okr-tree.css';
+
+const props = defineProps({
+    // 数据源
+    data: {
+        type: Array,
+        default: () => []
+    },
+    // 是否默认展开
+    defaultExpanded: {
+        type: Boolean,
+        default: true
+    },
+    // 是否显示折叠按钮
+    showCollapsable: {
+        type: Boolean,
+        default: true
+    },
+    // 是否水平
+    horizontal: {
+        type: Boolean,
+        default: false
+    },
+    // 节点文本key
+    labelKey: {
+        type: String,
+        default: 'label'
+    },
+    // 子节点key   
+    childrenKey: {
+        type: String,
+        default: 'children'
+    },
+    // 圆角的判定key
+    circleKey: {
+        type: String,
+        default: 'isCircle'
+    },
+    // 二级文本内容key
+    contentKey: {
+        type: String,
+        default: 'content'
+    }
+
+})
+
+const calcData = computed(() => props.data.map(item => ({
+    label: item[props.labelKey],
+    isCircle: item[props.circleKey],
+    content: item[props.contentKey],
+    children: item[props.childrenKey]
+})))
+
+const emit = defineEmits(['nodeClick']);
+
+const formatClass = (node) => node.data.isCircle ? 'okrTreeCircle' : '';
+
+const renderContent = (e) => h('div', { class: 'okrTreeDiv' }, [
+    h('div', e.node.data.label),
+    h('div', { class: 'okrTreeContent' }, e.node.data.content)
+])
+
+const nodeClick = (e) => {
+    emit('nodeClick', e);
+}
+
+</script>
+
+<style>
+.okrTreeCircle {
+    padding: 5px 20px !important;
+    border-radius: 34px;
+}
+
+.okrTreeDiv {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.okrTreeContent {
+    font-size: 14px;
+    color: #666;
+}
+</style>

package/src/components/EbizPageHeader.vue

@@ -1,96 +1,96 @@
-<template>
-  <div class="ebiz-page-header">
-    <div>
-      <div style="display: flex; align-items: center;">
-        <t-breadcrumb>
-          <t-breadcrumb-item :to="{ path: '/' }">
-            <template #icon><t-icon name="home" /></template>首页
-          </t-breadcrumb-item>
-          <t-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
-            <template #icon v-if="item.icon">
-              <t-icon :name="item.icon" />
-            </template>
-            {{ item.title }}
-          </t-breadcrumb-item>
-        </t-breadcrumb>
-      </div>
-      <slot></slot>
-    </div>
-    <div style="display: flex; align-items: center;">
-      <slot name="right"></slot>
-      <div class="help-doc" @click="goToHelp">
-        <t-icon name="chat-bubble-help-filled"></t-icon>
-        <span>帮助文档</span>
-      </div>
-    </div>
-
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, watch } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { Breadcrumb as TBreadcrumb, BreadcrumbItem as TBreadcrumbItem, Icon as TIcon } from "tdesign-vue-next"
-
-const router = useRouter()
-const route = useRoute()
-
-const breadcrumbList = ref([])
-
-// 计算面包屑导航列表
-const generateBreadcrumb = () => {
-  const matched = route.matched
-  if (!matched.length) return
-
-  const result = []
-  matched.forEach(route => {
-    if (route.meta && route.meta.title) {
-      result.push({
-        title: route.meta.title,
-        icon: route.meta.icon || '',
-        path: route.path
-      })
-    }
-  })
-
-  breadcrumbList.value = result
-}
-
-// 跳转到帮助文档页面
-const goToHelp = () => {
-  router.push(`/help?route=${route.path}`)
-}
-
-// 监听路由变化
-watch(() => route.path, () => {
-  generateBreadcrumb()
-}, { immediate: true })
-
-onMounted(() => {
-  generateBreadcrumb()
-})
-</script>
-
-<style scoped>
-.ebiz-page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.help-doc {
-  display: flex;
-  align-items: center;
-  color: var(--td-brand-color);
-  cursor: pointer;
-  transition: opacity 0.2s;
-}
-
-.help-doc:hover {
-  opacity: 0.8;
-}
-
-.help-doc span {
-  margin-left: 4px;
-}
+<template>
+  <div class="ebiz-page-header">
+    <div>
+      <div style="display: flex; align-items: center;">
+        <t-breadcrumb>
+          <t-breadcrumb-item :to="{ path: '/' }">
+            <template #icon><t-icon name="home" /></template>首页
+          </t-breadcrumb-item>
+          <t-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
+            <template #icon v-if="item.icon">
+              <t-icon :name="item.icon" />
+            </template>
+            {{ item.title }}
+          </t-breadcrumb-item>
+        </t-breadcrumb>
+      </div>
+      <slot></slot>
+    </div>
+    <div style="display: flex; align-items: center;">
+      <slot name="right"></slot>
+      <div class="help-doc" @click="goToHelp">
+        <t-icon name="chat-bubble-help-filled"></t-icon>
+        <span>帮助文档</span>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { Breadcrumb as TBreadcrumb, BreadcrumbItem as TBreadcrumbItem, Icon as TIcon } from "tdesign-vue-next"
+
+const router = useRouter()
+const route = useRoute()
+
+const breadcrumbList = ref([])
+
+// 计算面包屑导航列表
+const generateBreadcrumb = () => {
+  const matched = route.matched
+  if (!matched.length) return
+
+  const result = []
+  matched.forEach(route => {
+    if (route.meta && route.meta.title) {
+      result.push({
+        title: route.meta.title,
+        icon: route.meta.icon || '',
+        path: route.path
+      })
+    }
+  })
+
+  breadcrumbList.value = result
+}
+
+// 跳转到帮助文档页面
+const goToHelp = () => {
+  router.push(`/help?route=${route.path}`)
+}
+
+// 监听路由变化
+watch(() => route.path, () => {
+  generateBreadcrumb()
+}, { immediate: true })
+
+onMounted(() => {
+  generateBreadcrumb()
+})
+</script>
+
+<style scoped>
+.ebiz-page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.help-doc {
+  display: flex;
+  align-items: center;
+  color: var(--td-brand-color);
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.help-doc:hover {
+  opacity: 0.8;
+}
+
+.help-doc span {
+  margin-left: 4px;
+}
 </style>