feat: shrimp-admin v0.1.0 — 从 hand-admin 抽离的框架前端

Shrimp 框架前端 — 一种消费 ShrimpServer + ShrimpTable 契约的经典 Vue3 + Element Plus 实现。不是框架本身,只是按 shrimp-server 约定写的一份参考解法。包含: - ShrimpClient + VueAdmin(factory:createShrimpAdmin) - 5 个 Shrimp* 组件 + 10 个内置 Field*.vue + PowerTree + LangSwitch - 4 个内置模块:user / role / operationLog / FieldRelativeTime - 完整后台壳 views(layout/login/sideM/topbar/userbar/navMenu/App/404/logo) - composables/useTableUrlSync, locales(zh-cn/en 框架默认), style 全套 API 改造: - createShrimpAdmin({ config, moduleSources, customFields, locales }) factory - vueAdmin 改为 Proxy 单例,createShrimpAdmin 调用前访问会抛错 - import.meta.glob 业务字段/模块由消费侧传入(vite 静态扫描机制限制) - 框架默认 locales 与消费侧 locales 在 i18n 初始化时合并源码 ship 不打包,消费侧靠 vite 直接吃 .ts/.vue。
2026-05-23 21:01:33 +08:00
parent b4ee2e4b43
commit 4cb3bb8d75
50 changed files with 6551 additions and 0 deletions
@@ -0,0 +1,42 @@
+<template>
+    <template v-if="mode === 'display'">
+        <el-tooltip :content="fullTime" placement="top">
+            <span>{{ relativeTime }}</span>
+        </el-tooltip>
+    </template>
+    <el-date-picker v-else :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)" :disabled="disabled" type="datetime" style="width: 100%" />
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { vueAdmin } from '../VueAdmin'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+    field: any
+    modelValue: any
+    mode: 'display' | 'edit'
+    disabled?: boolean
+}>()
+
+defineEmits<{
+    'update:modelValue': [value: any]
+}>()
+
+const fullTime = computed(() => {
+    if (!props.modelValue) return '-'
+    return new Date(props.modelValue).toLocaleString(vueAdmin.locale === 'en' ? 'en-US' : 'zh-CN')
+})
+
+const relativeTime = computed(() => {
+    if (!props.modelValue) return '-'
+    const diff = Date.now() - props.modelValue
+    if (diff < 60000) return t('table.justNow')
+    if (diff < 3600000) return t('table.minutesAgo', { n: Math.floor(diff / 60000) })
+    if (diff < 86400000) return t('table.hoursAgo', { n: Math.floor(diff / 3600000) })
+    if (diff < 2592000000) return t('table.daysAgo', { n: Math.floor(diff / 86400000) })
+    return fullTime.value
+})
+</script>
@@ -0,0 +1,238 @@
+<template>
+    <el-container class="role-page">
+        <!-- 左侧：角色列表 -->
+        <el-aside width="260px">
+            <div class="role-list-card">
+                <div class="role-list-header">{{ $t('role.menuList') }}</div>
+                <div class="role-list-body">
+                    <div v-for="role in roleList" :key="role._id" class="role-item"
+                        :class="{ active: activeId === role._id }" @click="onSelect(role._id)">
+                        {{ role.name }}
+                    </div>
+                    <div v-if="roleList.length === 0" class="empty-tip">{{ $t('role.empty') }}</div>
+                </div>
+                <div class="role-list-footer" v-if="can('add')">
+                    <el-button type="primary" @click="handleAdd" class="add-btn">{{ $t('role.addRole') }}</el-button>
+                </div>
+            </div>
+        </el-aside>
+
+        <!-- 右侧：角色编辑 -->
+        <el-main>
+            <div v-if="currentRole" class="role-form">
+                <el-form :model="formData" label-width="80px">
+                    <el-form-item :label="$t('role.name')">
+                        <el-input v-model="formData.name" />
+                    </el-form-item>
+                    <el-form-item :label="$t('role.description')">
+                        <el-input v-model="formData.description" type="textarea" :rows="3" />
+                    </el-form-item>
+                    <el-form-item :label="$t('role.powers')">
+                        <PowerTree :modelValue="formData.powers || []" :allPowers="allPowers" :menuTree="vueAdmin.menuTree"
+                            @update:modelValue="val => formData.powers = val" />
+                    </el-form-item>
+                </el-form>
+                <div class="form-footer">
+                    <el-button v-if="can('edit')" type="primary" @click="handleSave">{{ $t('base.save') }}</el-button>
+                    <el-popconfirm v-if="can('delete')" :title="$t('role.confirmDelete')" :confirm-button-text="$t('base.delete')"
+                        :cancel-button-text="$t('base.cancel')" confirm-button-type="danger" @confirm="handleDelete">
+                        <template #reference>
+                            <el-button type="danger">{{ $t('base.delete') }}</el-button>
+                        </template>
+                    </el-popconfirm>
+                </div>
+            </div>
+            <el-empty v-else :description="$t('role.selectOrCreate')" />
+        </el-main>
+    </el-container>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { vueAdmin } from '../VueAdmin'
+import { IRole, IRoleProto, WithId, ILabel } from 'shrimp-server/types'
+import { ElMessage } from 'element-plus'
+import PowerTree from '../components/PowerTree.vue'
+
+interface IPowerItem {
+    key: string
+    label: ILabel
+}
+
+const { t } = useI18n()
+
+const props = defineProps<{
+    moduleKey: string
+    events?: string[]
+}>()
+
+const roleApi = vueAdmin.getModule<IRoleProto>('role')
+
+const roleList = ref<WithId<IRole>[]>([])
+const activeId = ref('')
+const allPowers = ref<IPowerItem[]>([])
+
+const currentRole = ref<WithId<IRole> | null>(null)
+const formData = ref<Partial<Omit<IRole, 'createdAt' | 'updatedAt'>>>({
+    name: '',
+    description: '',
+    powers: [],
+})
+
+const can = vueAdmin.can('role')
+
+async function loadRoles() {
+    const res = await roleApi.list()
+    roleList.value = res.list || res as any
+}
+
+function onSelect(id: string) {
+    activeId.value = id
+    const role = roleList.value.find(r => r._id === id)
+    if (role) {
+        currentRole.value = { ...role }
+        formData.value = {
+            name: role.name,
+            description: role.description,
+            powers: [...(role.powers || [])],
+        }
+    }
+}
+
+async function handleAdd() {
+    try {
+        const created = await roleApi.add({ name: t('role.newRole'), description: '', powers: [] } as any)
+        await loadRoles()
+        onSelect(created._id)
+    } catch (e: any) {
+        console.warn('[Role]', e.message)
+    }
+}
+
+async function handleSave() {
+    try {
+        await roleApi.edit(currentRole.value!._id, formData.value)
+        await loadRoles()
+        onSelect(currentRole.value!._id)
+        ElMessage.success(t('base.success'))
+    } catch (e: any) {
+        console.warn('[Role]', e.message)
+    }
+}
+
+async function handleDelete() {
+    try {
+        await roleApi.delete(currentRole.value!._id)
+        currentRole.value = null
+        activeId.value = ''
+        await loadRoles()
+        if (roleList.value.length > 0) {
+            onSelect(roleList.value[0]._id)
+        }
+    } catch (e: any) {
+        console.warn('[Role]', e.message)
+    }
+}
+
+onMounted(async () => {
+    allPowers.value = await roleApi.allPower()
+    await loadRoles()
+    if (roleList.value.length > 0) {
+        onSelect(roleList.value[0]._id)
+    }
+})
+</script>
+
+<style scoped>
+.role-page {
+    height: 100%;
+    padding: 16px;
+}
+
+.el-aside {
+    margin-right: 16px;
+    border: none;
+}
+
+@media (max-width: 992px) {
+    .el-aside {
+        margin-right: 0;
+    }
+
+    .role-list-card {
+        margin-bottom: 16px;
+    }
+}
+
+/* 角色列表卡片 */
+.role-list-card {
+    border: 1px solid var(--el-border-color);
+    border-radius: 8px;
+    background: var(--el-bg-color);
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+
+.role-list-header {
+    padding: 12px 16px;
+    font-weight: 600;
+    font-size: 14px;
+    border-bottom: 1px solid var(--el-border-color);
+}
+
+.role-list-body {
+    flex: 1;
+    overflow-y: auto;
+}
+
+.role-item {
+    padding: 10px 16px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background 0.2s;
+    border-bottom: 1px solid var(--el-border-color-extra-light);
+}
+
+.role-item:hover {
+    background: var(--el-fill-color-light);
+}
+
+.role-item.active {
+    background: var(--el-color-primary-light-9);
+    color: var(--el-color-primary);
+    font-weight: 500;
+}
+
+.role-list-footer {
+    border-top: 1px solid var(--el-border-color);
+}
+
+.add-btn {
+    width: 100%;
+    height: 40px;
+    border-radius: 0 0 8px 8px;
+    border: none !important;
+    font-size: 14px;
+}
+
+/* 角色表单 */
+.role-form {
+    max-width: 700px;
+}
+
+.form-footer {
+    padding-top: 16px;
+    border-top: 1px solid var(--el-border-color);
+    margin-top: 16px;
+}
+
+.empty-tip {
+    padding: 20px;
+    text-align: center;
+    color: var(--el-text-color-placeholder);
+    font-size: 14px;
+}
+</style>
@@ -0,0 +1,14 @@
+<template>
+    <ShrimpTable moduleKey="user" />
+</template>
+
+<script lang="ts" setup>
+import ShrimpTable from '../components/ShrimpTable.vue'
+import { vueAdmin } from '../VueAdmin'
+import FieldRelativeTime from './FieldRelativeTime.vue'
+
+vueAdmin.overrideField('user', 'updatedAt', FieldRelativeTime)
+</script>
+
+<style scoped>
+</style>
@@ -0,0 +1,67 @@
+<template>
+    <div class="op-log-page">
+        <div v-if="user" class="page-header">
+            <span class="page-subtitle">{{ user.nickname || user.username }}</span>
+        </div>
+        <div class="page-body">
+            <ShrimpTable v-if="userId" :key="userId" moduleKey="operationLog" />
+            <el-empty v-else :description="t('base.notFound')" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import ShrimpTable from '../../components/ShrimpTable.vue'
+import { vueAdmin } from '../../VueAdmin'
+
+const route = useRoute()
+const { t } = useI18n()
+
+const userId = computed(() => route.query.id as string)
+const user = ref<any>(null)
+
+async function loadUser() {
+    if (!userId.value) {
+        user.value = null
+        return
+    }
+    try {
+        const api = vueAdmin.getModule<any>('user')
+        user.value = await api.get(userId.value)
+    } catch (e: any) {
+        console.warn('[operationLog] load user failed', e?.message || e)
+    }
+}
+
+watch(userId, loadUser)
+onMounted(loadUser)
+</script>
+
+<style scoped>
+.op-log-page {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+}
+
+.page-header {
+    padding: 8px 16px;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+    background: var(--el-bg-color);
+}
+
+.page-subtitle {
+    color: var(--el-text-color-secondary);
+    font-size: 13px;
+}
+
+.page-body {
+    flex: 1;
+    overflow: auto;
+    min-height: 0;
+}
+</style>