v0.3.0: 单 sources 入口 + 路径后缀覆盖约定

破坏性重构。框架对外只暴露一个 `sources` glob 入口,消费侧任何 .vue
都按文件路径后缀匹配同后缀覆盖:

- shrimp/components/<name>.vue 同后缀覆盖框架内置(login/layout/topbar/ShrimpTable/...)
- shrimp/components/fields/Field<X>.vue 注册类型 <x>(首字母小写)
- shrimp/module/<key>.vue 业务模块

变更:
- 删除 customFields / moduleSources / overrideField / registerField 旧入口
- 删除 fieldOverrides Map,字段表纯靠 glob 扫描注册
- 框架内 .vue 对可覆盖 peer 改用 defineAsyncComponent(resolveVue(...))
  (login → ShrimpLangSwitch / layout → sideM/navMenu/topbar/userbar/logo /
   ShrimpTable → ShrimpEditDrawer/ShrimpFilterDrawer/...)
- views/ 全部并入 components/,App.vue 上提到 src/ 根
- LangSwitch → ShrimpLangSwitch,PowerTree → ShrimpPowerTree
- module/FieldRelativeTime.vue → components/fields/FieldRelativeTime.vue
- module/user.vue 改用 #column-updatedAt slot 替代旧的 overrideField

字段类型约定从 'field' + Name 改为 lowercase-first(FieldString → 'string'),
内置和消费侧统一。
This commit is contained in:
2026-05-25 15:05:16 +08:00
parent ac57de97cb
commit 2b33bca681
20 changed files with 165 additions and 112 deletions
+131
View File
@@ -0,0 +1,131 @@
<template>
<div class="login_bg">
<LangSwitch class="login-lang" />
<div class="login_main">
<div class="login-form">
<div class="login-header">
<div class="logo">
<label>{{ vueAdmin.adminConfig.title || 'Admin' }}</label>
</div>
</div>
<el-form ref="loginForm" :model="form" :rules="rules" label-width="0" size="large" @keyup.enter="login">
<el-form-item prop="user">
<el-input v-model="form.user" prefix-icon="el-icon-user" clearable
:placeholder="$t('login.userPlaceholder')">
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="form.password" prefix-icon="el-icon-lock" clearable show-password
:placeholder="$t('login.PWPlaceholder')"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width: 100%" :loading="info.islogin" round @click="login">{{
$t("login.signIn") }}</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { vueAdmin, resolveVue } from "../VueAdmin";
import { defineAsyncComponent, reactive, computed, onMounted } from "vue";
import { useI18n } from "vue-i18n";
const LangSwitch = defineAsyncComponent(resolveVue('components/ShrimpLangSwitch.vue'));
vueAdmin.token = null;
let { t } = useI18n();
let info = reactive({ islogin: false });
let form = reactive({ user: import.meta.env.DEV ? "admin" : "", password: import.meta.env.DEV ? "admin" : "" });
let rules = computed(() => ({
user: [{ required: true, message: t("login.userError"), trigger: "blur" }],
password: [{ required: true, message: t("login.PWError"), trigger: "blur" }],
}));
// 页面加载时获取后台配置
onMounted(() => {
vueAdmin.fetchConfig().then(data => {
Object.assign(vueAdmin.adminConfig, data)
}).catch(() => {})
})
function login() {
info.islogin = true;
vueAdmin.fetchLogin({ username: form.user, password: form.password })
.then(async (data) => {
vueAdmin.token = data.token;
await vueAdmin.loadUserInfo();
info.islogin = false;
vueAdmin.router.push(vueAdmin.getFirstMenuPath());
})
.catch((e: any) => {
console.warn('[Login]', e.message)
info.islogin = false;
});
}
</script>
<style scoped>
.login_bg {
width: 100%;
height: 100%;
background: #fff;
display: flex;
position: relative;
}
.login_main {
flex: 1;
overflow: auto;
display: flex;
}
.login-form {
width: 400px;
margin: auto;
padding: 20px 0;
}
.login-header {
margin-bottom: 40px;
}
.login-header .logo {
display: flex;
align-items: center;
justify-content: center;
}
.login-header .logo label {
font-size: 26px;
font-weight: bold;
}
.login-lang {
position: absolute;
top: 16px;
right: 16px;
}
@media (max-width: 1200px) {
.login-form {
width: 340px;
}
}
@media (max-width: 1000px) {
.login_main {
display: block;
}
.login-form {
width: 100%;
padding: 20px 40px;
}
}
</style>