feat(fields): 可选字段(非 required)编辑态可清空,统一 :clearable=!required

之前 Select/Relation 编辑态根本没 clearable(可选也删不掉),String/Textarea/Date 又恒清。
现统一 String/Textarea/Select/Relation/Date 的 edit 控件 clearable=!required:可选给清空、必填不给。
Relation 清空归一成 null(el-select 单选清空发 '',ObjectId 存 '' 会 cast 报错)。
已知例外:Number 用 el-input-number 无 clearable 属性,只能手动清空输入框、无按钮。

package.json

@@ -1,6 +1,6 @@
 {
     "name": "shrimp-admin",
-    "version": "0.3.0",
+    "version": "0.3.7",
     "private": true,
     "description": "Shrimp 框架前端 — 消费 ShrimpServer + ShrimpTable 契约的经典 Vue3 + Element Plus 实现",
     "main": "src/index.ts",

src/VueAdmin.ts

@@ -123,11 +123,19 @@ export class VueAdmin extends ShrimpClient {
     userName = ''
     config: ShrimpAdminConfig
     langList: { lang: string; name: string }[]
+    /** 已注册成功的模块路由(moduleKey → IRouteInfo)，供 relation 跳转/单项查看解析路由 */
+    moduleRoutes = new Map<string, IRouteInfo>()
 
     getFieldComponent(_moduleKey: string, type: string, _fieldKey?: string): Component {
         return fieldRegistry.get(type) || fieldRegistry.get('string')!
     }
 
+    /** 目标模块能否作为「单项查看」跳转目标:已按权限注册路由 且 非子模块。返回其路由信息或 undefined(不可跳) */
+    routeForModule(moduleKey: string): IRouteInfo | undefined {
+        if (this.moduleInfo.find(m => m.moduleKey === moduleKey)?.parent) return undefined
+        return this.moduleRoutes.get(moduleKey)
+    }
+
     state = reactive({ isMobile: false })
 
     private _token: string | null = null
@@ -256,6 +264,7 @@ export class VueAdmin extends ShrimpClient {
             props: { moduleKey: info.moduleKey, events: info.events },
             meta: { title: info.label }
         })
+        this.moduleRoutes.set(info.moduleKey, info)
     }
 
     initRouter() {

src/components/ShrimpTable.vue

@@ -29,7 +29,7 @@
                             <slot :name="`column-${field.key}`" :row="row" :field="field">
                                 <component :is="vueAdmin.getFieldComponent(moduleKey, field.type, field.key)" :field="field"
                                     :model-value="row[field.key]" mode="display"
-                                    v-bind="field.type === 'relation' || field.type === 'textarea' ? { displayLabel: row[field.key + '_label'] } : {}" />
+                                    v-bind="field.type === 'textarea' || field.type === 'tab' ? { displayLabel: row[field.key + '_label'] } : {}" />
                             </slot>
                         </template>
                     </el-table-column>
@@ -78,7 +78,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, useSlots, onMounted, type Component } from 'vue'
+import { ref, computed, useSlots, onMounted, provide, type Component } from 'vue'
 import { ITableCrudProto, IFieldConfig, IModuleInfo, IPageQuery } from '../IShrimpType'
 import { vueAdmin } from '../VueAdmin'
 import { Plus, Delete as DeleteIcon, Download, Upload, Edit, VideoPlay, VideoPause, Operation } from '@element-plus/icons-vue'
@@ -132,8 +132,18 @@ const {
 
 const searchVisible = ref(false)
 
+// relation 跳转用 ?filter={_id} 锁定单条；_id 是隐形 pin(不在筛选抽屉里)，
+// 用户一旦搜索/改筛选就清掉它，避免被看不见的 _id 一直 AND 着导致结果莫名为空
+function stripJumpPin() {
+    if ('_id' in filterData.value) {
+        const { _id, ...rest } = filterData.value
+        filterData.value = rest
+    }
+}
+
 function onSearch() {
     searchKeyword.value = keyword.value
+    stripJumpPin()
     currentPage.value = 1
     refresh()
 }
@@ -151,7 +161,8 @@ const hasFilter = computed(() => {
 })
 
 async function handleFilterConfirm(newFilterData: Record<string, any>) {
-    filterData.value = newFilterData
+    const { _id, ...rest } = newFilterData   // 确认筛选 → 丢弃跳转 pin
+    filterData.value = rest
     currentPage.value = 1
     await refresh()
 }
@@ -214,6 +225,9 @@ const filterSlotNames = computed(() => Object.keys(slots).filter(name => name.st
 const data = ref<any[]>([])
 const loading = ref(false)
 const total = ref(0)
+// relation 显示名字典 { moduleKey: { id: 名 } }，由 list 响应带回，provide 给表格里的字段组件查名
+const refs = ref<Record<string, Record<string, any>>>({})
+provide('shrimpRefs', refs)
 
 // ---- 对话框状态 ----
 
@@ -501,6 +515,7 @@ async function refresh(query?: Record<string, any>) {
         Object.assign(pageQuery, query)
         const res = await api.list(pageQuery)
         data.value = res.list || []
+        refs.value = res.refs || {}
         total.value = res.total
         currentPage.value = res.page
         currentPageSize.value = res.pageSize

src/components/fields/FieldDate.vue

@@ -42,7 +42,7 @@
         style="width: 100%"
     />
     <el-date-picker v-else :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)" :disabled="disabled"
-        type="datetime" style="width: 100%" />
+        type="datetime" :clearable="!field.required" style="width: 100%" />
 </template>
 
 <script lang="ts" setup>

src/components/fields/FieldRelation.vue

@@ -1,7 +1,13 @@
 <template>
     <template v-if="mode === 'display'">
-        <template v-if="field.multiple && Array.isArray(displayLabel)">{{ displayLabel.filter(Boolean).join(', ') || '-' }}</template>
+        <template v-if="field.multiple">
-        <template v-else>{{ displayLabel || modelValue || '-' }}</template>
+            <span v-if="!displayItems.length">-</span>
+            <template v-for="(it, i) in displayItems" :key="i"><a v-if="jumpable" class="rel-link" @click.stop="goto(it.id)">{{ it.name }}</a><span v-else>{{ it.name }}</span><span v-if="i < displayItems.length - 1">、</span></template>
+        </template>
+        <template v-else>
+            <a v-if="jumpable && modelValue != null" class="rel-link" @click.stop="goto(modelValue)">{{ displayName }}</a>
+            <span v-else>{{ displayName || '-' }}</span>
+        </template>
     </template>
     <el-select
         v-else-if="mode === 'filter'"
@@ -12,13 +18,13 @@
     >
         <el-option v-for="opt in options" :key="opt.value" :label="opt.label" :value="opt.value" />
     </el-select>
-    <el-select v-else :model-value="stringValue" @update:model-value="$emit('update:modelValue', $event)" :disabled="disabled" :multiple="field.multiple" filterable remote :remote-method="onSearch" :loading="loading" style="width: 100%">
+    <el-select v-else :model-value="stringValue" @update:model-value="onEdit" :disabled="disabled" :multiple="field.multiple" :clearable="!field.required" filterable remote :remote-method="onSearch" :loading="loading" style="width: 100%">
         <el-option v-for="opt in options" :key="opt.value" :label="opt.label" :value="opt.value" />
     </el-select>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, computed } from 'vue'
+import { ref, inject, onMounted, computed, type Ref } from 'vue'
 import { vueAdmin } from '../../VueAdmin'
 import { ITableCrudProto } from '../../IShrimpType'
 
@@ -27,16 +33,44 @@ const props = defineProps<{
     modelValue: any
     mode: 'display' | 'edit' | 'filter'
     disabled?: boolean
-    displayLabel?: string | string[]
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
     'update:modelValue': [value: any]
 }>()
 
+// 编辑态清空：el-select 单选清空发 ''，但 relation 是 ObjectId，存 '' 会 cast 报错 → 归一成 null(取消关联)
+function onEdit(v: any) {
+    emit('update:modelValue', v === '' ? null : v)
+}
+
 const options = ref<{ label: string; value: string }[]>([])
 const loading = ref(false)
 
+// 显示用：从 ShrimpTable provide 的 refs 字典按 id 查名（替代旧的 _label）
+const refs = inject<Ref<Record<string, Record<string, any>>>>('shrimpRefs', ref<Record<string, Record<string, any>>>({}))
+const dict = computed(() => refs.value?.[props.field.relation?.moduleKey] ?? {})
+const displayName = computed(() => {
+    const id = props.modelValue
+    if (id == null) return ''
+    return dict.value[String(id)] ?? String(id)
+})
+const displayItems = computed(() =>
+    (Array.isArray(props.modelValue) ? props.modelValue : [])
+        .filter((id: any) => id != null)
+        .map((id: any) => ({ id, name: dict.value[String(id)] ?? String(id) }))
+)
+
+// 单项查看跳转：目标模块可达(已注册路由)且非子模块时，名字可点 → 跳目标模块并过滤到该 _id(单行)
+const jumpable = computed(() =>
+    props.mode === 'display' && !!props.field.relation && !!vueAdmin.routeForModule(props.field.relation.moduleKey)
+)
+function goto(id: any) {
+    const r = props.field.relation && vueAdmin.routeForModule(props.field.relation.moduleKey)
+    if (!r || id == null) return
+    vueAdmin.router.push({ name: r.name, query: { filter: JSON.stringify({ _id: String(id) }) } })
+}
+
 /** 统一转为字符串值，解决 ObjectId 与 el-select 的匹配问题 */
 const stringValue = computed(() => {
     // filter 模式强制 multiple，始终返回数组
@@ -92,3 +126,13 @@ onMounted(async () => {
     }
 })
 </script>
+
+<style scoped>
+.rel-link {
+    color: var(--el-color-primary);
+    cursor: pointer;
+}
+.rel-link:hover {
+    text-decoration: underline;
+}
+</style>

src/components/fields/FieldSelect.vue

@@ -21,6 +21,7 @@
         @update:model-value="$emit('update:modelValue', $event)"
         :disabled="disabled"
         :multiple="field.multiple"
+        :clearable="!field.required"
         style="width: 100%"
     >
         <el-option v-for="opt in resolvedOptions" :key="opt.value" :label="vueAdmin.t(opt.label)" :value="opt.value" />

src/components/fields/FieldString.vue

@@ -9,7 +9,7 @@
         </el-tag>
         <el-input v-model="inputValue" @keyup.enter="addTag" @blur="addTag" :placeholder="$t('base.pressEnter')" />
     </div>
-    <el-input v-else :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)" :disabled="disabled" clearable />
+    <el-input v-else :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)" :disabled="disabled" :clearable="!field.required" />
 </template>
 
 <script lang="ts" setup>

src/components/fields/FieldTab.vue

@@ -1,6 +1,10 @@
 <template>
     <template v-if="mode === 'display'">
-        <span v-if="!modelValue || typeof modelValue !== 'object'">-</span>
+        <!-- 表格列展示后端算好的 stringify 文本(displayLabel=${key}_label);本体仍是对象,供编辑/逻辑用 -->
+        <el-tooltip v-if="displayLabel" :content="String(displayLabel)" placement="top">
+            <span class="tab-display">{{ displayLabel }}</span>
+        </el-tooltip>
+        <span v-else-if="!modelValue || typeof modelValue !== 'object'">-</span>
         <el-tooltip v-else :content="JSON.stringify(modelValue, null, 2)" placement="top">
             <span class="tab-display">{{ displayText }}</span>
         </el-tooltip>
@@ -35,6 +39,7 @@ const props = defineProps<{
     modelValue: any
     mode: 'display' | 'edit' | 'filter'
     disabled?: boolean
+    displayLabel?: string
 }>()
 
 const emit = defineEmits<{

src/components/fields/FieldTextarea.vue

@@ -19,7 +19,7 @@
         :model-value="modelValue"
         @update:model-value="$emit('update:modelValue', $event)"
         :disabled="disabled"
-        clearable
+        :clearable="!field.required"
     />
 </template>
 

src/components/layout.vue

@@ -24,7 +24,7 @@
 		<div v-if="!vueAdmin.state.isMobile && nextMenu.length > 0" class="aminui-side">
 			<div class="adminui-side-scroll">
 				<el-scrollbar>
-					<el-menu :default-active="$route.fullPath" router>
+					<el-menu :default-active="$route.path" router>
 						<navMenu :navMenus="nextMenu"></navMenu>
 					</el-menu>
 				</el-scrollbar>

src/components/sideM.vue

@@ -17,7 +17,7 @@
 			<el-main>
 				<el-scrollbar>
 					<el-menu
-						:default-active="$route.fullPath"
+						:default-active="$route.path"
 						@select="select"
 						router
 						background-color="#212d3d"

src/module/role.vue

@@ -50,6 +50,7 @@
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
 import { vueAdmin } from '../VueAdmin'
 import { IRole, IRoleProto, WithId, ILabel } from '../IShrimpType'
 import { ElMessage } from 'element-plus'
@@ -61,12 +62,24 @@ interface IPowerItem {
 }
 
 const { t } = useI18n()
+const route = useRoute()
 
 const props = defineProps<{
     moduleKey: string
     events?: string[]
 }>()
 
+// relation 跳转落到 role 页时带 ?filter={"_id":...}。role 是自定义 master-detail 页(非 ShrimpTable、
+// 不做服务端过滤)，全量加载后按这个 _id 在列表里选中那条；解析不出就走默认(选第一个)。
+function jumpTargetId(): string {
+    try {
+        const f = route.query.filter ? JSON.parse(String(route.query.filter)) : null
+        return f && typeof f === 'object' ? String(f._id || '') : ''
+    } catch {
+        return ''
+    }
+}
+
 const roleApi = vueAdmin.getModule<IRoleProto>('role')
 
 const roleList = ref<WithId<IRole>[]>([])
@@ -138,7 +151,10 @@ async function handleDelete() {
 onMounted(async () => {
     allPowers.value = await roleApi.allPower()
     await loadRoles()
-    if (roleList.value.length > 0) {
+    const jumpId = jumpTargetId()
+    if (jumpId && roleList.value.some(r => r._id === jumpId)) {
+        onSelect(jumpId)
+    } else if (roleList.value.length > 0) {
         onSelect(roleList.value[0]._id)
     }
 })