component_ryl_v3 1.1.0

package/src/packages/handHeader/sidebarItem.vue

@@ -0,0 +1,173 @@
+<template>
+  <!-- 没有子菜单的菜单项 -->
+  <template v-if="!item.children">
+    <ElMenuItem :index="item.path">
+      <i :class="['iconfont', item.meta.icon]" v-if="item.meta.icon"></i>
+      <template #title>
+          <div class="mainMenu">
+            <span>{{ item.meta.title }}</span>
+            <em class="elbadge hot" v-if="item.tips && item.tips.name === 'hot'"></em>
+            <em class="elbadge new" v-if="item.tips && item.tips.name === 'new'"></em>
+            <em class="elbadge run" v-if="item.tips && item.tips.name === 'run'">{{ item.tips.value }}</em>
+            <em class="elbadge num" v-if="item.tips && item.tips.name === 'num' && Number(item.tips.value) < 100">
+              {{ item.tips.value }}
+            </em>
+            <em class="elbadge num nine" v-if="item.tips && item.tips.name === 'num' && Number(item.tips.value) >= 100">
+              99<em>+</em>
+            </em>
+          </div>
+      </template>
+    </ElMenuItem>
+  </template>
+
+  <!-- 有子菜单的菜单项 -->
+  <ElSubMenu v-else :index="item.path">
+    <!-- 这是二级菜单的标题 -->
+    <template #title>
+      <i :class="['iconfont', item.meta.icon]" v-if="item.meta.icon"></i>
+      <template v-if="!hideMenu">
+        <div class="mainMenu">
+          <span>{{ item.meta.title }}</span>
+          <em class="elbadge hot" v-if="item.tips && item.tips.name === 'hot'"></em>
+          <em class="elbadge new" v-if="item.tips && item.tips.name === 'new'"></em>
+          <em class="elbadge run" v-if="item.tips && item.tips.name === 'run'">{{ item.tips.value }}</em>
+          <em class="elbadge num" v-if="item.tips && item.tips.name === 'num' && Number(item.tips.value) < 100">
+            {{ item.tips.value }}
+          </em>
+          <em class="elbadge num nine" v-if="item.tips && item.tips.name === 'num' && Number(item.tips.value) >= 100">
+            99<em>+</em>
+          </em>
+        </div>
+      </template>
+      <template v-else>
+        <span>{{ item.meta.title }}</span>
+      </template>
+    </template>
+
+    <!-- 递归渲染子菜单  -- 这是二级菜单的子菜单 -->
+    <template v-if="item.children">
+      <template v-for="child in item.children" :key="child.path">
+        <!-- 如果有子菜单，递归调用自身 -->
+        <sidebar-item
+          v-if="child.children && child.children.length"
+          :item="child"
+          :hideMenu="hideMenu"
+        />
+        <!-- 子菜单项 -->
+        <ElMenuItem v-else :index="child.path">
+          <template #title>
+            <i :class="['iconfont', child.meta.icon]" v-if="child.meta.icon"></i>
+            <template v-if="!hideMenu">
+              <div class="mainMenu">
+                <span>{{ child.meta.title }}</span>
+                <em class="elbadge hot" v-if="child.tips && child.tips.name === 'hot'"></em>
+                <em class="elbadge new" v-if="child.tips && child.tips.name === 'new'"></em>
+                <em class="elbadge run" v-if="child.tips && child.tips.name === 'run'">{{ child.tips.value }}</em>
+                <em class="elbadge num" v-if="child.tips && child.tips.name === 'num' && Number(child.tips.value) < 100">
+                  {{ child.tips.value }}
+                </em>
+                <em class="elbadge num nine" v-if="child.tips && child.tips.name === 'num' && Number(child.tips.value) >= 100">
+                  99<em>+</em>
+                </em>
+              </div>
+            </template>
+            <template v-else>
+              <span>{{ child.meta.title }}</span>
+            </template>
+          </template>
+        </ElMenuItem>
+      </template>
+    </template>
+  </ElSubMenu>
+</template>
+
+<script setup>
+/**
+ * 侧边栏菜单项组件
+ */
+import { ElMenuItem, ElSubMenu } from 'element-plus'
+
+defineProps({
+  item: {
+    type: Object,
+    default: () => ({})
+  },
+  hideMenu: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.mainMenu{
+    display: inline-block;
+    position: relative;
+    .elbadge{
+      color: #ff0000;
+      font-style: normal;
+      &.hot::after{
+        display: inline-block;
+        content: '';
+        width: 8px;
+        height: 8px;
+        background-color: #ff0000;
+        border-radius: 100%;
+        transform: scale(.9);
+        position: absolute;
+        top:10px;
+        right: -10px;
+      }
+      &.new::after{
+        display: inline-block;
+        content: 'new';
+        background-color: #ff0000;
+        color: #fff;
+        padding: 0 4px 1px 4px;
+        line-height: 16px;
+        border-radius: 4px;
+        transform: scale(.9);
+        position: absolute;
+        top: 6px;
+        right: -32px;
+      }
+      &.run{
+        display: inline-block;
+        color: #fff;
+        background-color: #ff0000;
+        min-width: 20px;
+        padding: 0 2px;
+        text-align: center;
+        height: 16px;
+        line-height: 16px;
+        border-radius: 4px;
+        animation: changeRun 1.5s ease-in-out 0s infinite;
+      }
+      &.num{
+        display: inline-block;
+        background-color: #ff0000;
+        color: #fff;
+        width: 20px;
+        text-align: center;
+        height: 16px;
+        line-height: 16px;
+        border-radius: 4px;
+        transform: scale(.9);
+        position: absolute;
+        top: 6px;
+        right: -22px;
+        &.nine{
+          width: 26px;
+          right: -28px;
+          em{
+            position: relative;
+            top:-4px;
+          }
+        }
+      }
+    }
+  }
+  .el-menu-item span,.el-sub-menu__title span{
+    font-size: 14px;
+  }
+</style>

package/src/packages/handNoData/handNoData.vue

@@ -0,0 +1,45 @@
+<template>
+  <!-- 空数据提示组件 -->
+  <div class="initNoData flex flex_row">
+    <div class="inner">
+      <img :src="noDataImg" alt="暂无数据">
+      <p>{{title}}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+/**
+ * 空数据提示组件
+ * 功能：当列表数据为空时显示友好的提示信息
+ */
+import noDataImg from '@/assets/img/noData.png'
+
+/**
+ * 组件属性定义
+ * @property {string} title - 提示文本，默认"暂无数据"
+ */
+defineProps({
+  title: {
+    type: String,
+    default: '暂无数据'
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+/* 空数据容器样式 */
+.initNoData{
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  .inner{
+    text-align: center;
+    p{
+      color: #666;
+      margin-top: 12px;
+      line-height: normal;
+    }
+  }
+}
+</style>

package/src/packages/handPaging/handPaging.vue

@@ -0,0 +1,137 @@
+<template>
+  <!-- 分页组件 -->
+  <div class="initPaging">
+    <!-- 使用ConfigProvider设置中文locale -->
+    <ElConfigProvider :locale="zhCn">
+      <ElPagination
+        background 
+        v-model:current-page="currentPage"    
+        v-model:page-size="pageSize"          
+        :total="total"                        
+        :page-sizes="[10, 15, 20, 50, 100]"      
+        :disabled="disabled"                  
+        :hide-on-single-page="hideOnSingle"
+        :size="size"
+        :layout="layout"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </ElConfigProvider>
+  </div>
+</template>
+
+<script setup>
+/**
+ * 分页组件
+ * 功能：封装Element Plus分页组件，提供统一的分页交互和事件处理
+ */
+
+// 导入Vue响应式API
+import { ref, watch } from 'vue'
+// 导入Element Plus组件和中文语言包
+import { ElPagination, ElConfigProvider } from 'element-plus'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+
+/**
+ * 组件属性定义
+ * @property {number} currentPage - 当前页码
+ * @property {number} pageSize - 每页条数
+ * @property {number} total - 总记录数
+ * @property {boolean} disabled - 是否禁用分页
+ * @property {boolean} hideOnSingle - 只有一页时是否隐藏
+ * @property {string} layout - 分页布局（'total,sizes,prev, pager, next'）
+ * @property {string} size - 分页大小（'small' | 'default' | 'large'） 默认'small'
+ * 
+ * 注意：组件内部已使用 ElConfigProvider 配置中文语言包，分页文案会自动显示为中文
+ * 显示效果："共 X 条"、"X条/页"、"上一页"、"下一页"
+ */
+const props = defineProps({
+  currentPage: {
+    type: Number,
+    default: 1
+  },
+  pageSize: {
+    type: Number,
+    default: 10
+  },
+  total: {
+    type: Number,
+    default: 0
+  },
+  layout: {
+    type: String,
+    default: 'total,sizes,prev, pager, next'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  hideOnSingle: {
+    type: Boolean,
+    default: true
+  },
+  size: {
+    type: String,
+    default: 'small'
+  }
+})
+
+/**
+ * 事件定义
+ * @event page-change - 页码改变事件（包含当前页和每页条数）
+ */
+const emit = defineEmits(['page-change'])
+
+/**
+ * 当前页码（响应式）
+ * @type {import('vue').Ref<number>}
+ */
+const currentPage = ref(props.currentPage)
+
+/**
+ * 每页条数（响应式）
+ * @type {import('vue').Ref<number>}
+ */
+const pageSize = ref(props.pageSize)
+
+/**
+ * 监听props中的currentPage变化，同步到本地响应式数据
+ */
+watch(() => props.currentPage, (val) => {
+  currentPage.value = val
+})
+
+/**
+ * 监听props中的pageSize变化，同步到本地响应式数据
+ */
+watch(() => props.pageSize, (val) => {
+  pageSize.value = val
+})
+
+/**
+ * 处理每页条数改变
+ * @param {number} val - 新的每页条数
+ */
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  emit('page-change', { page: currentPage.value, pageSize: val })
+}
+
+/**
+ * 处理当前页码改变
+ * @param {number} val - 新的页码
+ */
+const handleCurrentChange = (val) => {
+  currentPage.value = val
+  emit('page-change', { page: val, pageSize: pageSize.value })
+}
+</script>
+
+<style lang="scss" scoped>
+/* 分页组件容器样式 */
+.initPaging{
+  :deep(.el-select__placeholder){
+    text-align: center;
+  }
+}
+</style>

package/src/packages/handSeeImg/handSeeImg.vue

@@ -0,0 +1,80 @@
+<template>
+  <!-- 图片预览遮罩层 -->
+  <div class="previewFix" v-if="show" @click="exitPreview($event)">
+    <img :src="src" />
+  </div>
+</template>
+
+<script setup>
+/**
+ * 图片预览组件
+ * 功能：提供点击放大查看图片的功能，支持点击遮罩层关闭预览
+ */
+
+// 导入Vue响应式API
+import { ref } from 'vue'
+
+/**
+ * 预览遮罩层显示状态
+ * @type {import('vue').Ref<boolean>}
+ */
+const show = ref(false)
+
+/**
+ * 当前预览图片的URL
+ * @type {import('vue').Ref<string>}
+ */
+const src = ref('')
+
+/**
+ * 退出预览
+ * 点击遮罩层（非图片区域）时关闭预览
+ * @param {Event} e - 点击事件对象
+ */
+const exitPreview = (e) => {
+  // 判断点击的是否是图片元素，如果不是则关闭预览
+  if (e.target.nodeName !== "IMG") {
+    show.value = false
+  }
+}
+
+/**
+ * 打开图片预览
+ * @param {string} imageSrc - 图片URL
+ */
+const openPreview = (imageSrc) => {
+  // 设置预览图片地址
+  src.value = imageSrc
+  // 显示预览遮罩层
+  show.value = true
+}
+
+/**
+ * 暴露方法给父组件调用
+ * @method openPreview - 打开图片预览
+ */
+defineExpose({
+  openPreview
+})
+</script>
+
+<style lang="scss" scoped>
+/* 预览遮罩层样式 */
+.previewFix{
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  background-color: rgba(0, 0, 0, .5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  
+  img{
+      max-width: 98%;
+      max-height: 98%;
+  }
+}
+</style>

package/src/packages/handTab/handTab.vue

@@ -0,0 +1,108 @@
+<template>
+  <!-- 标签切换组件 -->
+  <div class="status_search">
+    <span
+      v-for="(item, index) in list"
+      :key="index"
+      :class="{ active: currentIndex == index }"
+      @click="clickStatus(index, item)"
+      >{{ item.label }}</span
+    >
+  </div>
+</template>
+
+<script setup>
+/**
+ * 标签切换组件
+ * 功能：提供一组可点击的标签，用于切换不同状态或分类
+ */
+
+// 导入Vue响应式API
+import { ref } from 'vue'
+
+/**
+ * 组件属性定义
+ * @property {Array<Object>} list - 标签列表数据
+ * @property {string} list[].label - 标签显示文本
+ */
+defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  }
+})
+
+/**
+ * 事件定义
+ * @event getStatus - 标签点击事件，返回选中的索引和项数据
+ */
+const emit = defineEmits(['getStatus'])
+
+/**
+ * 当前选中的标签索引
+ * @type {import('vue').Ref<number>}
+ */
+const currentIndex = ref(0)
+
+/**
+ * 处理标签点击事件
+ * @param {number} i - 点击的标签索引
+ * @param {Object} v - 点击的标签数据
+ */
+const clickStatus = (i, v) => {
+  // 更新当前选中索引
+  currentIndex.value = i
+  // 触发事件，传递索引和标签数据
+  emit('getStatus', { index: i, ...v })
+}
+
+/**
+ * 设置当前选中的标签索引（供父组件调用）
+ * @param {number} index - 要选中的标签索引
+ */
+const setIndex = (index) => {
+  currentIndex.value = index
+}
+
+/**
+ * 暴露方法给父组件调用
+ * @method setIndex - 设置当前选中的标签索引
+ */
+defineExpose({
+  setIndex
+})
+</script>
+
+<style lang="scss" scoped>
+/* 标签容器样式 */
+.status_search {
+  display: inline-block;
+  
+  span {
+    min-width: 40px;
+    height: 30px;
+    padding: 0 10px;
+    display: inline-block;
+    text-align: center;
+    line-height: 30px;
+    border: 1px solid #d9d9d9;
+    border-right: 1px solid transparent;
+    cursor: pointer;
+    
+    &:first-child {
+      border-radius: 2px 0px 0px 2px;
+    }
+    
+    &:last-child {
+      border-radius: 0px 2px 2px 0px;
+      border-right: 1px solid #d9d9d9;
+    }
+  }
+  
+  .active {
+    background: #06f;
+    color: #fff;
+    border-color: #06f;
+  }
+}
+</style>