vue2-client 1.16.95 → 1.16.97

package/src/base-client/components/his/XTitle/XTitle.vue

@@ -1,288 +1,306 @@
-<template>
-  <div class="x-title-container" :class="wrapperClassObject">
-    <div
-      v-if="config.type === 'title'"
-      class="x-title"
-      :class="{ 'with-underline': config.line === 'line' }">
-      <div class="title-content">
-        <div class="title-dot"></div>
-        <a-icon v-if="attrs.icon && !attrs.customIcon" :type="attrs.icon" class="title-icon" />
-        <XIcon v-if="attrs.customIcon" :name="attrs.customIcon" class="title-icon" />
-        <span>{{ config.label }}</span>
-      </div>
-      <div
-        v-if="config.line === 'line'"
-        class="underline"
-        :style="lineStyle">
-      </div>
-    </div>
-    <div v-else-if="config.type === 'button'" class="x-button-container">
-      <a-button type="primary" @click="handleClick">{{ config.label }}</a-button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, useAttrs } from 'vue'
-import XIcon from '../XIcon/XIcon.vue'
-
-const props = defineProps({
-  queryParamsName: {
-    type: String,
-    default: ''
-  },
-  // 新增：直接设置标题文本，优先级高于queryParamsName
-  title: {
-    type: String,
-    default: ''
-  }
-})
-
-const emit = defineEmits([])
-
-const config = ref({
-  label: '',
-  type: 'title',
-  clickName: '',
-  line: '',
-  color: '',
-  lineLength: ''
-})
-
-const lineStyle = computed(() => {
-  const style = {}
-
-  // 设置线条颜色
-  style.backgroundColor = config.value.color || '#5D5C5C'
-
-  // 设置线条宽度
-  style.width = config.value.lineLength ? `${config.value.lineLength}px` : '800px'
-
-  return style
-})
-
-// 动态样式开关：通过 $attrs 生成 xtitle-* 类（布尔开关 + size 派生类）
-const attrs = useAttrs()
-const wrapperClassObject = computed(() => {
-  const classes = {}
-  const booleanStyleKeys = [
-    'center',
-    'littlefont',
-    'dot',
-    'nodot',
-    'yizhu-title',
-    'left-title',
-    'line-style', // 分割线样式
-    'compact' // 紧凑样式高23 字体大小16
-  ]
-  booleanStyleKeys.forEach(key => {
-    const val = attrs[key]
-    const truthy = val === true || val === '' || val === 'true'
-    if (truthy) classes[`x-title-${key}`] = true
-  })
-  return classes
-})
-
-const handleClick = () => {
-  if (config.value.clickName) {
-    emit(config.value.clickName)
-  }
-}
-
-const parseConfig = (data) => {
-  // 如果设置了title属性，直接使用title作为标签
-  if (props.title) {
-    config.value.label = props.title
-    config.value.type = 'title'
-    config.value.line = ''
-    config.value.color = ''
-    config.value.lineLength = ''
-    config.value.clickName = ''
-    return
-  }
-
-  if (!data) return
-
-  const parts = data.includes('-') ? data.split('-') : data === 'line' ? ['', 'title', 'line'] : [data]
-
-  // 基本设置 - 标签和类型
-  config.value.label = parts[0] || ''
-  config.value.type = parts[1] || 'title'
-
-  // 根据类型采用不同的参数格式解析
-  if (config.value.type === 'title') {
-    // 标题类型格式: aa-title-line-red-800
-    // parts[0]: 标签
-    // parts[1]: title
-    // parts[2]: line (下划线样式)
-    // parts[3]: 颜色
-    // parts[4]: 长度
-    config.value.line = parts[2] || ''
-    config.value.color = parts[3] || ''
-    config.value.lineLength = parts[4] || ''
-  } else if (config.value.type === 'button') {
-    // 按钮类型格式: aa-button-cc
-    // parts[0]: 标签
-    // parts[1]: button
-    // parts[2]: 点击事件名称
-    config.value.clickName = parts[2] || ''
-  }
-}
-
-onMounted(() => {
-  parseConfig(props.queryParamsName)
-})
-</script>
-
-<style scoped lang="less">
-.x-title-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.x-title {
-  font-size: 18px;
-  font-weight: 700;
-  height: 26px;
-  width: 100%;
-  text-align: left;
-  font-family: "Source Han Sans";
-  color: #313131;
-  position: relative;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.underline {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: 1px;
-  width: 100%;
-  background-color: #5D5C5C;
-}
-
-.x-button-container {
-  text-align: right;
-}
-.x-title-center {
-  &.x-title-container,
-  .x-title-container {
-    :deep(.x-title) {
-      text-align: center;
-    }
-  }
-}
-.x-title-littlefont {
-  &.x-title-container,
-  .x-title-container {
-    :deep(.x-title) {
-      font-size: 16px;
-    }
-  }
-}
-
-.title-icon {
-  font-size: 16px;
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: baseline;
-  line-height: 1;
-  color: #5D5C5C;
-  margin-right: 8px;
-  transform: translateY(0.1em);
-}
-
-// title-content 默认样式 - 只保留右侧间距
-.x-title-container {
-  :deep(.title-content) {
-    display: flex;
-    align-items: baseline;
-  }
-}
-
-.x-title-dot,
-.x-title-nodot {
-  &.x-title-container,
-  .x-title-container {
-    :deep(.title-dot) {
-      width: 14px;
-      height: 14px;
-      margin-right: 8px;
-      flex-shrink: 0;
-    }
-  }
-}
-
-// dot 样式特有部分
-.x-title-dot {
-  &.x-title-container,
-  .x-title-container {
-    :deep(.title-dot) {
-      border-radius: 50%;
-      background-color: #3362DA;
-    }
-  }
-}
-.x-title-yizhu-title {
-  &.x-title-container,
-  .x-title-container {
-    margin-top: 3px;
-    margin-left: 6px;
-    margin-bottom: 7px;
-    :deep(.x-title) {
-      height: 26px;
-      opacity: 1;
-      font-family: "Source Han Sans";
-      font-size: 18px;
-      font-weight: bold;
-      line-height: normal;
-      letter-spacing: 0em;
-      font-feature-settings: "kern" on;
-      color: #5D5C5C;
-    }
-  }
-}
-.x-title-left-title {
-  &.x-title-container,
-  .x-title-container {
-    margin: 15px auto 15px 6px;
-    :deep(.x-title) {
-      height: 26px;
-      opacity: 1;
-      font-family: "Source Han Sans";
-      font-size: 18px;
-      font-weight: bold;
-      line-height: normal;
-    }
-  }
-}
-// nodot 样式特有部分
-.x-title-nodot {
-  &.x-title-container,
-  .x-title-container {
-    :deep(.title-dot) {
-      /* 透明圆点，保持占位但不显示 */
-      background-color: transparent;
-    }
-  }
-}
-.x-title-line-style {
-  background: #0057FE;
-  height: 2px;
-}
-.x-title-compact {
-  height: 23px;
-  opacity: 1;
-  font-family: "Source Han Sans";
-  font-size: 16px;
-  font-weight: bold;
-  line-height: normal;
-  letter-spacing: 0em;
-  font-feature-settings: "kern" on;
-  color: #313131;
-}
-</style>
+<template>
+  <div>
+    <div
+      v-if="isShowTopLine">
+      <hr class="top-line"/>
+    </div>
+    <div class="x-title-container" :class="wrapperClassObject">
+      <div
+        v-if="config.type === 'title'"
+        class="x-title"
+        :class="{ 'with-underline': config.line === 'line' }">
+        <div class="title-content">
+          <div class="title-dot"></div>
+          <a-icon v-if="attrs.icon && !attrs.customIcon" :type="attrs.icon" class="title-icon" />
+          <XIcon v-if="attrs.customIcon" :name="attrs.customIcon" class="title-icon" />
+          <span>{{ config.label }}</span>
+        </div>
+        <div
+          v-if="config.line === 'line'"
+          class="underline"
+          :style="lineStyle">
+        </div>
+      </div>
+      <div v-else-if="config.type === 'button'" class="x-button-container">
+        <a-button type="primary" @click="handleClick">{{ config.label }}</a-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, useAttrs } from 'vue'
+import XIcon from '../XIcon/XIcon.vue'
+
+const props = defineProps({
+  queryParamsName: {
+    type: String,
+    default: ''
+  },
+  // 新增：直接设置标题文本，优先级高于queryParamsName
+  title: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits([])
+
+const config = ref({
+  label: '',
+  type: 'title',
+  clickName: '',
+  line: '',
+  color: '',
+  lineLength: ''
+})
+
+const lineStyle = computed(() => {
+  const style = {}
+
+  // 设置线条颜色
+  style.backgroundColor = config.value.color || '#5D5C5C'
+
+  // 设置线条宽度
+  style.width = config.value.lineLength ? `${config.value.lineLength}px` : '800px'
+
+  return style
+})
+
+// 动态样式开关：通过 $attrs 生成 xtitle-* 类（布尔开关 + size 派生类）
+const attrs = useAttrs()
+const wrapperClassObject = computed(() => {
+  const classes = {}
+  const booleanStyleKeys = [
+    'center',
+    'littlefont',
+    'dot',
+    'nodot',
+    'yizhu-title',
+    'left-title',
+    'line-style', // 分割线样式
+    'compact' // 紧凑样式高23 字体大小16
+  ]
+  booleanStyleKeys.forEach(key => {
+    const val = attrs[key]
+    const truthy = val === true || val === '' || val === 'true'
+    if (truthy) classes[`x-title-${key}`] = true
+  })
+  return classes
+})
+// 是否显示顶部功能区
+const isShowTopLine = computed(() => {
+  return attrs.showTopLine === 'true' || attrs.showTopLine === true
+})
+
+const handleClick = () => {
+  if (config.value.clickName) {
+    emit(config.value.clickName)
+  }
+}
+
+const parseConfig = (data) => {
+  // 如果设置了title属性，直接使用title作为标签
+  if (props.title) {
+    config.value.label = props.title
+    config.value.type = 'title'
+    config.value.line = ''
+    config.value.color = ''
+    config.value.lineLength = ''
+    config.value.clickName = ''
+    return
+  }
+
+  if (!data) return
+
+  const parts = data.includes('-') ? data.split('-') : data === 'line' ? ['', 'title', 'line'] : [data]
+
+  // 基本设置 - 标签和类型
+  config.value.label = parts[0] || ''
+  config.value.type = parts[1] || 'title'
+
+  // 根据类型采用不同的参数格式解析
+  if (config.value.type === 'title') {
+    // 标题类型格式: aa-title-line-red-800
+    // parts[0]: 标签
+    // parts[1]: title
+    // parts[2]: line (下划线样式)
+    // parts[3]: 颜色
+    // parts[4]: 长度
+    config.value.line = parts[2] || ''
+    config.value.color = parts[3] || ''
+    config.value.lineLength = parts[4] || ''
+  } else if (config.value.type === 'button') {
+    // 按钮类型格式: aa-button-cc
+    // parts[0]: 标签
+    // parts[1]: button
+    // parts[2]: 点击事件名称
+    config.value.clickName = parts[2] || ''
+  }
+}
+
+onMounted(() => {
+  parseConfig(props.queryParamsName)
+})
+</script>
+
+<style scoped lang="less">
+.x-title-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.x-title {
+  font-size: 18px;
+  font-weight: 700;
+  height: 26px;
+  width: 100%;
+  text-align: left;
+  font-family: "Source Han Sans";
+  color: #313131;
+  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.underline {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 1px;
+  width: 100%;
+  background-color: #5D5C5C;
+}
+
+.x-button-container {
+  text-align: right;
+}
+.x-title-center {
+  &.x-title-container,
+  .x-title-container {
+    :deep(.x-title) {
+      text-align: center;
+    }
+  }
+}
+.x-title-littlefont {
+  &.x-title-container,
+  .x-title-container {
+    :deep(.x-title) {
+      font-size: 16px;
+    }
+  }
+}
+
+.title-icon {
+  font-size: 16px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: baseline;
+  line-height: 1;
+  color: #5D5C5C;
+  margin-right: 8px;
+  transform: translateY(0.1em);
+}
+
+// title-content 默认样式 - 只保留右侧间距
+.x-title-container {
+  :deep(.title-content) {
+    display: flex;
+    align-items: baseline;
+  }
+}
+// 顶部分割线
+.top-line {
+  width: 100%;
+  height: 2px;
+  background-color: #0057FE;
+  border: none;
+  margin: 8px 0;
+  opacity: 1;
+}
+.x-title-dot,
+.x-title-nodot {
+  &.x-title-container,
+  .x-title-container {
+    :deep(.title-dot) {
+      width: 14px;
+      height: 14px;
+      margin-right: 8px;
+      flex-shrink: 0;
+    }
+  }
+}
+
+// dot 样式特有部分
+.x-title-dot {
+  &.x-title-container,
+  .x-title-container {
+    :deep(.title-dot) {
+      border-radius: 50%;
+      background-color: #3362DA;
+    }
+  }
+}
+.x-title-yizhu-title {
+  &.x-title-container,
+  .x-title-container {
+    margin-top: 3px;
+    margin-left: 6px;
+    margin-bottom: 7px;
+    :deep(.x-title) {
+      height: 26px;
+      opacity: 1;
+      font-family: "Source Han Sans";
+      font-size: 18px;
+      font-weight: bold;
+      line-height: normal;
+      letter-spacing: 0em;
+      font-feature-settings: "kern" on;
+      color: #5D5C5C;
+    }
+  }
+}
+.x-title-left-title {
+  &.x-title-container,
+  .x-title-container {
+    margin: 15px auto 15px 6px;
+    :deep(.x-title) {
+      height: 26px;
+      opacity: 1;
+      font-family: "Source Han Sans";
+      font-size: 18px;
+      font-weight: bold;
+      line-height: normal;
+    }
+  }
+}
+// nodot 样式特有部分
+.x-title-nodot {
+  &.x-title-container,
+  .x-title-container {
+    :deep(.title-dot) {
+      /* 透明圆点，保持占位但不显示 */
+      background-color: transparent;
+    }
+  }
+}
+.x-title-line-style {
+  background: #0057FE;
+  height: 2px;
+}
+.x-title-compact {
+  height: 23px;
+  opacity: 1;
+  font-family: "Source Han Sans";
+  font-size: 16px;
+  font-weight: bold;
+  line-height: normal;
+  letter-spacing: 0em;
+  font-feature-settings: "kern" on;
+  color: #313131;
+}
+</style>