基于 Vue3.x + Vite5.x + Typescript

【以下为已发布组件，其余插件目前还在更新中···】

• 01-系统切换
• 02-iOT 图标选择
• 03-换肤 · New
• 04-系统切换 2(New)

更新说明 2024-12-20 (version 1.0.0-beta.2)

• [x] #### V1.0.0（配置升级至 Vite5, 下期将适配到 vite6）

• [x] 新增系统切换 2

• [x] 优化 Skin 换肤国际化配置（支持多语言切换）

• [x] 优化部分动画效果

• [x] 修复了部分已知 bug

01-系统切换

全局引入

import shilvren from 'shilvren'
import 'shilvren/lib/style.css'

const app = createApp(App)

app.use(router).use(shilvren)

按需引入(此项暂停使用，请稍等片刻)

import OSS from 'shilvren'
import 'shilvren/lib/style.css'

使用

<slv-oss ref="ossRef" @getOssParams="getOssParams" />
import { ref } from 'vue'
const ossRef = ref<any>(null)

传参

interface Oss_ {
    apps: any[] // 应用列表
    works: any[] // 工作列表
    title?: string // 插槽标题
    avator?: string // 用户头像
}
const ossParams: Oss_ = ref<any){
    apps: [],
    works: [],
    title: '',
    avator: ''
}
----------------------------------------------------------------
【props传参】
title?: string // 标题
tips?: string  // 副标题/提示信息
isBotm: boolean // 是否需要底部说明栏（默认有）
infoConf?: {
    isExplain: true, // 是否需要左侧说明
    isUserInfo: true, // 是否显示用户信息
    exp: { // exp 属性在 v0.3.0+之后弃用（特别说明！！！）
        p1: '说明1',
        p2: '说明2',
        p3: ''
    },
    user: {
        username: 'shilvren',
        nickname: 'shilvren',
        mobile: '123', // mobile 属性在v0.3.0+起弃用！！！
        email: '**@**.com'
    }
}
activeSession?: { // 当前用户的session信息
    sessionName: 'shilvren', // sessionName信息
    appFieldName: 'name'
    workFieldName: 'id'
}
autoGetUserBySession: string // 自动获取用户的sessionName

【v0.3.0新增默认值传参属性 defaultValue】
interface DfaultValue_ {
    app?: string
    work?: string
}
defaultValue?: DfaultValue_

事件

ossRef.value.handleGetParams(ossParams.value) // 调用弹出框并传参
const getOssParams = (v: any) => {} // 确认（回调）
ossRef.value.handleClose() // 关闭

02-iOT 图标选择

使用

<slv-icon @handleGetActive="handleGetActive" />

传参

interface Ps {
    isFilter? boolean // 是否启用筛选（默认启用）
    activeColor?: string // 选中时颜色（该属性暂未启用，传递无效）
}

事件

const handleGetActive = (v: any) => {} // 确认（回调）
const iconFontRef = ref < any > null
iconFontRef.value && iconFontRef.value.handleConvertValue(data.icon || '') // 图标转化

03-换肤 · New

使用

<slv-skin :themes="themes" defaultThemes="SakuraPink" :isCallTheme="false" @getThemesName="getThemesName" />

传参

interface Skin_ {
    themes: any[] // 主题列表
    defaultThemes?: string // 默认主题
    isCallTheme?: boolean // 是否需要返回主题名称(默认不返回)
}

事件

const getThemesName = (v: any) => {} // 返回主题名称

04-系统切换 2(New)

说明：此组件用法（含Event及Method回调）及传参与“01-系统切换”基本无异
主要区别：
（1）、主要统一了接口类型
（2）、优化了部分场景逻辑
（3）、新增了部分属性值
/* 统一接口类型 */
interface AppTypeCom {
    appname: string
    appTitle: string
    router?: string
    icon?: string
    imgBg?: string
    [key: string]: unknown
}
interface WorkTypeCom {
    id: string | number
    isMain: number | boolean
    orgName: string
    positionName?: string
    [key: string]: unknown
}

/* 新增配置项fieldConf部分属性值[AppTitle/WorkTitle/WorkTitleTips] */
fieldConf.value = {
    AppTitle: '替换【选择应用】',
    WorkTitle: '替换【工作切换】',
    WorkTitleTips: '替换【工作切换后问号内的提示内容】',
    SwitchSure: '底部【确认切换】按钮',
    QuitClose: '底部【关闭退出】按钮',
    NothingData: '当字段无值时显示的默认内容',
    HeadSoltTip1: '顶部说明文案1(默认应用&工作切换标题下面的说明内容，布局需要，最多支持2行)',
    HeadSoltTip2: '同上【HeadSoltTip1】',
    // 以下属性v1.0.0后已弃用
    SelectRole: '',
    ActiveAccount: '',
    UserNickname: '',
    KeepEmail: ''
}
<slv-oss-next
    ref="yourRef"
    :title="'yourTitle'"
    tips="os & role"
    :infoConf="请参考01-系统切换"
    :activeSession="'请参考01-系统切换'"
    :autoGetUserBySession="'请参考01-系统切换'"
    :defaultValue="{
        app: '请参考01-系统切换',
        work: '请参考01-系统切换'
    }"
/>

其他补充说明

$$ 应用列表中，可以自行替换应用左上角图标（以字段icon进行识别）、应用背景（imgBg）为准。 支持主流的web格式。 $$