@xilonglab/vue-main 0.7.8

package/dist/page/app.vue

@@ -0,0 +1,86 @@
+<script setup>
+const props = defineProps({
+    condition: {
+        type: Boolean,
+        default: false
+    }
+})
+</script>
+
+<template>
+  <div class="user-view" v-if="condition">
+    <slot name="sidebar" />
+    <div class="body">
+      <slot name="topbar" />
+      <router-view  class="content" v-slot="{ Component }">
+        <keep-alive>
+          <component :is="Component" />
+        </keep-alive>
+      </router-view>
+    </div>
+  </div>
+  <div class="system-view" v-else>
+    <router-view />
+  </div>
+</template>
+
+<style lang="less">
+body {
+  background: radial-gradient(circle at 10% 20%, rgb(0, 93, 133) 0%, rgb(0, 181, 149) 90%) !important;
+}
+
+html,
+body,
+#app,
+.user-view,
+.system-view {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  max-width: none;
+  text-align: left;
+  color: #000;
+}
+
+.user-view {
+  display: flex;
+  flex-flow: row;
+
+  .xl-side-bar {
+    width: 150px;
+
+    .logo-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-top: 5px;
+      border-bottom: 1px solid #1c3b64;
+
+      .logo {
+        opacity: 0.9;
+      }
+    }
+  }
+
+  .body {
+    flex: 1;
+    height: 100%;
+    width: 100%;
+    margin-right:5px;
+    display: flex;
+    flex-flow: column;
+    overflow-x: scroll;
+
+    .content {
+      flex: 1;
+      display: flex;
+      flex-flow: column;
+      min-height: 0; 
+      border-radius: 5px;
+      overflow: hidden;
+    }
+
+  }
+}
+</style>

package/dist/page/login.vue

@@ -0,0 +1,185 @@
+<script setup>
+import { Session } from '#/system'
+import { useRouter } from "vue-router"
+import { inject, reactive, ref } from 'vue'
+import gsap from 'gsap'
+
+
+const props = defineProps({
+    callback: {
+        type: Function,
+        default: () => {}
+    }
+})
+
+const router = useRouter()
+const store = inject('store')
+
+const refs = {
+    form: ref(null),
+    button: ref(null), 
+    loginBox: ref(null)
+}
+
+const state = reactive({
+    isRemember: false,
+    loading: false
+})
+
+const handleKeyEnter = () => refs.button.value.click()
+
+const showErrorAnimation = () => {
+    gsap.to(refs.loginBox.value, { duration: 0.1, x: -10, yoyo: true, repeat: 3 })
+}
+
+const showSuccessAnimation = async () => {
+    await gsap.to(refs.loginBox.value, { duration: 0.5, scale: 0.8, opacity: 0, ease: "power2.in" })
+}
+
+const handleLoginSuccess = ({ token, userData }) => {
+    store.state.accessToken = token
+    localStorage.setItem('accessToken', token)
+    store.state.userData = userData
+    router.push("/dashboard")
+    props.callback()
+}
+
+const handleLoginError = (data, { Captcha, Error }) => {
+    showErrorAnimation()
+    Captcha.refresh()
+    const errorMap = {
+        '用户不存在': Error.user,
+        '密码错误': Error.password,
+        '验证码错误': Error.captcha
+    }
+    errorMap[data.msg]?.()
+}
+
+async function login() {
+    state.loading = true
+    const { form, Captcha, Cookie, Error } = refs.form.value
+    
+    try {
+        if (!await refs.form.value.validate()) return
+        Cookie.set()
+        const data = await Session.resource.post(form, '')
+        
+        if (data.token) {
+            await showSuccessAnimation()
+            handleLoginSuccess(data)
+        } else if (data.code === 500) {
+            handleLoginError(data, { Captcha, Error })
+        }
+    } finally {
+        state.loading = false
+    }
+}
+</script>
+
+<template>
+    <div class="login">
+        <div class="login-box" ref="loginBox">
+            <div class="title">
+                <span class="system-title">__NAME__</span>
+                <span class="version">V__VERSION__</span>
+            </div>
+            <div class="wrapper">
+                <xl-login-form :ref="refs.form" @keyEnter="handleKeyEnter" :scope="state" />
+                <xl-async-button class="login-btn" :ref="refs.button" :api="login" :loading="state.loading" style="width: 100%">
+                    {{ state.loading ? '登录中...' : '登录' }}
+                </xl-async-button>
+                <div class="tips">
+                    <div class="remember">
+                        <el-checkbox v-model="state.isRemember"></el-checkbox>
+                        <span>记住密码</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="less">
+.login {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    font-family: "黑体";
+    
+    &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        backdrop-filter: blur(5px);
+    }
+
+    .login-box {
+        position: relative;
+        width: 400px;
+        background: rgba(255, 255, 255, 0.9);
+        padding: 30px;
+        border-radius: 15px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        transition: transform 0.3s ease;
+
+        &:hover {
+            transform: translateY(-5px);
+        }
+
+        .title {
+            text-align: center;
+            padding-bottom: 20px;
+            .system-title {
+                font-size: 32px;
+                font-weight: 600;
+                background: linear-gradient(45deg, #51c7f9, #3a5df7);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                display: block;
+            }
+            .version {
+                font-size: 14px;
+                color: #666;
+                opacity: 0.8;
+            }
+        }
+
+        .login-btn {
+            background: linear-gradient(45deg, #51c7f9, #3a5df7) !important;
+            font-size: 18px;
+            height: 42px;
+            color: #fff;
+            border-radius: 21px;
+            border: none;
+            transition: all 0.3s ease;
+
+            &:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 5px 15px rgba(58,93,247,0.3);
+            }
+        }
+
+        .tips {
+            width: 100%;
+            padding-top: 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .remember {
+                cursor: pointer;
+                color: #666;
+                font-size: 14px;
+                display: flex;
+                align-items: center;
+                gap: 5px;
+            }
+        }
+    }
+}
+</style>

package/dist/page/setting.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { User } from '#/people'
+import { ref, reactive, inject } from 'vue'
+
+const store = inject('store')
+const refs = { form: ref(null) }
+const data = reactive({ oldPassword: '', newPassword: '', repeatPassword: '' })
+const error = reactive({ oldPassword: '', newPassword: '', repeatPassword: '' })
+
+const rules = {
+    oldPassword: [{ required: true, message: "请输入原密码", trigger: "blur" }],
+    newPassword: [{ required: true, message: "请输入新密码", trigger: "blur" }],
+    repeatPassword: [{ required: true, message: "请再确认密码", trigger: "blur" }],
+}
+
+const confirm = async () => {
+    const isValid = await refs.form.value.validate()
+    if (!isValid) return
+
+    if (data.newPassword !== data.repeatPassword) {
+        error.repeatPassword = '两次输入不一致'
+    } else {
+        const { oldPassword, newPassword } = data
+        const rsp = await User.Password.resource.put({
+            userId: store.state.userData.id,
+            oldPassword,
+            newPassword
+        })
+        if (rsp?.code === 500 && rsp.msg === '原密码错误') {
+            error.oldPassword = '原密码错误'
+        } else {
+            Object.keys(data).forEach(key => data[key] = '')
+        }
+    }
+}
+</script>
+
+<template>
+    <div class="setting">
+        <div class="wrapper">
+            <el-form class="form" :ref="refs.form" :model="data" :rules="rules">
+                <el-form-item label="原密码" prop="oldPassword" :error="error.oldPassword">
+                    <xl-input type="password" v-model="data.oldPassword" placeholder="" style="width:100%"/>
+                </el-form-item>
+                <el-form-item label="新密码" prop="newPassword" :error="error.newPassword">
+                    <xl-input type="password" v-model="data.newPassword" placeholder="" style="width:100%"/>
+                </el-form-item>
+                <el-form-item label="请确认" prop="repeatPassword" :error="error.repeatPassword">
+                    <xl-input type="password" v-model="data.repeatPassword" placeholder="" style="width:100%"/>
+                </el-form-item>
+                <xl-button type="primary" @click="confirm">确定</xl-button>
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<style lang="less">
+.setting {
+    background: #fff;
+    .wrapper {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .form {
+            width: 360px;
+            height: 300px;
+            text-align: center;
+        }
+    }
+}
+</style>

package/dist/style/app.less

@@ -0,0 +1,58 @@
+body {
+  background: radial-gradient(circle at 10% 20%, rgb(0, 93, 133) 0%, rgb(0, 181, 149) 90%) !important;
+}
+
+html,
+body,
+#app,
+.user-view,
+.system-view {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  max-width: none;
+  text-align: left;
+  color: #000;
+}
+
+.user-view {
+  display: flex;
+  flex-flow: row;
+
+  .xl-side-bar {
+    width: 150px;
+
+    .logo-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-top: 5px;
+      border-bottom: 1px solid #1c3b64;
+
+      .logo {
+        opacity: 0.9;
+      }
+    }
+  }
+
+  .body {
+    flex: 1;
+    height: 100%;
+    width: 100%;
+    margin-right:5px;
+    display: flex;
+    flex-flow: column;
+    overflow-x: scroll;
+
+    .content {
+      flex: 1;
+      display: flex;
+      flex-flow: column;
+      min-height: 0; 
+      border-radius: 5px;
+      overflow: hidden;
+    }
+
+  }
+}

package/dist/style/reset.css

@@ -0,0 +1,32 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #e7ebf5;
+  border-radius: 10px;
+}

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@xilonglab/vue-main",
+  "version": "0.7.8",
+  "description": "xilong vue main",
+  "main": "packages/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "xilonglab",
+  "license": "ISC",
+  "dependencies": {
+    "element-plus": "2.3.6",
+    "image-conversion": "^2.1.1"
+  }
+}

package/packages/XlBreadcrumb.vue

@@ -0,0 +1,85 @@
+<script setup>
+defineOptions({ name: "XlBreadcrumb" })
+
+import { ref, watch, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+const route = useRoute();
+const router = useRouter();
+const breadcrumbData = ref([]);
+
+// 更新面包屑数�?
+const updateBreadcrumb = () => {
+    // 过滤有name和title属性的有效路由
+    breadcrumbData.value = route.matched
+        .filter(item => item.name && item.meta?.title)
+        .map(item => ({
+            title: item.meta.title,
+            path: item.path,
+            isClickable: item.path !== route.path // 当前页面不可点击
+        }));
+};
+
+// 处理面包屑点�?
+const handleClick = (path) => {
+    if (path === route.path) return; // 当前页面不跳�?
+    
+    // 查找对应的路由配�?
+    const findRoute = (routes, targetPath) => {
+        for (const r of routes) {
+            if (r.path === targetPath) return r;
+            if (r.children) {
+                const found = findRoute(r.children, targetPath);
+                if (found) return found;
+            }
+        }
+        return null;
+    };
+
+    const targetRoute = findRoute(router.options.routes, path);
+    
+    // 如果有子路由，跳转到第一个子路由
+    if (targetRoute?.children?.length) {
+        const firstChild = targetRoute.children[0];
+        const childPath = path + '/' + firstChild.path;
+        router.push(childPath);
+    } else {
+        router.push(path);
+    }
+};
+
+// 监听路由变化
+watch(() => route.path, updateBreadcrumb, { immediate: true });
+
+onMounted(updateBreadcrumb);
+</script>
+
+<template>
+    <el-breadcrumb v-if="breadcrumbData.length" class="xl-breadcrumb" separator="/">
+        <el-breadcrumb-item 
+            v-for="item in breadcrumbData" 
+            :key="item.path"
+            :class="{ 'current-page': !item.isClickable }"
+            @click="handleClick(item.path)"
+        >
+            {{ item.title }}
+        </el-breadcrumb-item>
+    </el-breadcrumb>
+</template>
+
+<style scoped>
+.xl-breadcrumb {
+    padding: 8px 0;
+    font-size: 14px;
+    user-select: none;
+}
+
+.el-breadcrumb__item {
+    cursor: pointer;
+}
+
+.el-breadcrumb__item.current-page {
+    cursor: default;
+    opacity: 0.8;
+}
+</style>

package/packages/XlControlBar.vue

@@ -0,0 +1,64 @@
+<script setup>
+defineOptions({ name: "XlControlBar" })
+
+const props = defineProps({
+    leftFlex: {
+        type: Number,
+        default: 1,
+    },
+    rightFlex: {
+        type: Number,
+        default: 3,
+    },
+})
+</script>
+
+
+<template>
+    <div class="xl-control-bar">
+        <div class="wrapper1" :style="`flex: ${props.leftFlex};`">
+            <div class="left">
+                <slot name="left" />
+            </div>
+        </div>
+        <div class="wrapper2" :style="`flex: ${props.rightFlex};`">
+            <div class="right">
+                <slot name="right" />
+            </div>
+        </div>
+    </div>
+</template>
+
+
+<style lang="less">
+.xl-control-bar {
+    display: flex;
+    position: absolute;
+    top: 3px;
+    right: 0;
+    width: 100%;
+    z-index: 1;
+    background: #fff;
+
+    .left {
+        display: flex;
+        align-items: center;
+    }
+
+    .right {
+        float: right;
+        display: flex;
+        align-items: center;
+        padding-right: 40px;
+
+        .xl-radio-button {
+            margin-right: 7px;
+        }
+
+        .xl-button,
+        .ant-btn-group {
+            margin-left: 3px;
+        }
+    }
+}
+</style>