From 0d93ec4c10d146ffe287e7f4430ee66ad5832a17 Mon Sep 17 00:00:00 2001
From: zhou zhou <3272660260@qq.com>
Date: 星期五, 10 四月 2026 16:08:20 +0800
Subject: [PATCH] #页面优化
---
rsf-design/src/views/basic-info/bas-container/modules/bas-container-areas-editor.vue | 266 ++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 223 insertions(+), 43 deletions(-)
diff --git a/rsf-design/src/views/basic-info/bas-container/modules/bas-container-areas-editor.vue b/rsf-design/src/views/basic-info/bas-container/modules/bas-container-areas-editor.vue
index 2ce6b2e..9d66a21 100644
--- a/rsf-design/src/views/basic-info/bas-container/modules/bas-container-areas-editor.vue
+++ b/rsf-design/src/views/basic-info/bas-container/modules/bas-container-areas-editor.vue
@@ -1,9 +1,9 @@
<template>
- <div class="space-y-3">
- <div class="flex flex-wrap items-center gap-2">
+ <div class="areas-editor">
+ <div class="areas-editor__toolbar">
<ElSelect
v-model="selectedAreaId"
- class="min-w-0 flex-1"
+ class="areas-editor__select"
clearable
filterable
placeholder="璇烽�夋嫨鍙叆搴撳尯"
@@ -15,44 +15,73 @@
:value="option.value"
/>
</ElSelect>
- <ElButton :disabled="selectedAreaId === '' || selectedAreaId === void 0" @click="handleAddArea">
+ <ElButton
+ :disabled="selectedAreaId === '' || selectedAreaId === void 0"
+ @click="handleAddArea"
+ >
娣诲姞
</ElButton>
+ <span class="areas-editor__toolbar-tip">
+ 宸查�� {{ selectedAreas.length }} 涓簱鍖猴紝鍙皟鏁撮『搴�
+ </span>
</div>
- <ElEmpty v-if="!selectedAreas.length" description="鏆傛棤鍙叆搴撳尯" />
+ <div class="areas-editor__panel">
+ <template v-if="selectedAreas.length">
+ <div class="areas-editor__header">
+ <span>搴忓彿</span>
+ <span>搴撳尯</span>
+ <span>鎺掑簭</span>
+ <span>鎿嶄綔</span>
+ </div>
- <div v-else class="space-y-2">
- <div
- v-for="(item, index) in selectedAreas"
- :key="item.id"
- class="flex flex-wrap items-center gap-2 rounded-lg border border-[var(--art-border-color)] px-3 py-2"
- >
- <div class="flex w-10 shrink-0 items-center justify-center text-sm text-[var(--art-text-secondary)]">
- {{ index + 1 }}
- </div>
- <div class="min-w-0 flex-1">
- <div class="truncate font-medium text-[var(--art-text-primary)]">
- {{ resolveAreaLabel(item) }}
+ <ElScrollbar max-height="240px">
+ <div class="areas-editor__list">
+ <div v-for="(item, index) in selectedAreas" :key="item.id" class="areas-editor__row">
+ <div class="areas-editor__index">
+ {{ index + 1 }}
+ </div>
+ <div class="areas-editor__name">
+ <div class="areas-editor__name-text">
+ {{ resolveAreaLabel(item) }}
+ </div>
+ <div class="areas-editor__meta"> ID: {{ item.id }} </div>
+ </div>
+ <div class="areas-editor__sort">
+ <ElInputNumber
+ :model-value="item.sort"
+ :min="1"
+ :controls-position="'right'"
+ class="areas-editor__sort-input"
+ @update:model-value="handleSortChange(item.id, $event)"
+ />
+ </div>
+ <div class="areas-editor__actions">
+ <ElButton text size="small" :disabled="index === 0" @click="handleMoveUp(index)">
+ 涓婄Щ
+ </ElButton>
+ <ElButton
+ text
+ size="small"
+ :disabled="index === selectedAreas.length - 1"
+ @click="handleMoveDown(index)"
+ >
+ 涓嬬Щ
+ </ElButton>
+ <ElButton text size="small" type="danger" @click="handleRemove(item.id)">
+ 鍒犻櫎
+ </ElButton>
+ </div>
+ </div>
</div>
- <div class="text-xs text-[var(--art-text-secondary)]">
- ID: {{ item.id }}
- </div>
- </div>
- <div class="flex items-center gap-2">
- <ElInputNumber
- :model-value="item.sort"
- :min="1"
- :controls-position="'right'"
- class="!w-24"
- @update:model-value="handleSortChange(item.id, $event)"
- />
- <ElButton text :disabled="index === 0" @click="handleMoveUp(index)">涓婄Щ</ElButton>
- <ElButton text :disabled="index === selectedAreas.length - 1" @click="handleMoveDown(index)">
- 涓嬬Щ
- </ElButton>
- <ElButton text type="danger" @click="handleRemove(item.id)">鍒犻櫎</ElButton>
- </div>
+ </ElScrollbar>
+ </template>
+
+ <div v-else class="areas-editor__empty">
+ <div class="areas-editor__empty-title">鏆傛棤鍙叆搴撳尯</div>
+ <div class="areas-editor__empty-tip"
+ >浠庝笂鏂归�夋嫨搴撳尯鍚庣偣鍑烩�滄坊鍔犫�濓紝鍐嶆寜鎺掑簭鍊兼垨涓婁笅绉诲姩璋冩暣椤哄簭</div
+ >
</div>
</div>
</div>
@@ -70,13 +99,14 @@
const selectedAreaId = ref('')
const selectedAreas = computed(() => normalizeSelectedAreas(modelValue.value))
- const areaOptionMap = computed(() =>
- new Map(
- (Array.isArray(props.areaOptions) ? props.areaOptions : [])
- .map((item) => normalizeAreaOption(item))
- .filter(Boolean)
- .map((item) => [String(item.value), item.label])
- )
+ const areaOptionMap = computed(
+ () =>
+ new Map(
+ (Array.isArray(props.areaOptions) ? props.areaOptions : [])
+ .map((item) => normalizeAreaOption(item))
+ .filter(Boolean)
+ .map((item) => [String(item.value), item.label])
+ )
)
const availableAreaOptions = computed(() => {
const selectedIds = new Set(selectedAreas.value.map((item) => String(item.id)))
@@ -95,7 +125,9 @@
}
return {
value: Number(value),
- label: String(option.label || option.name || option.areaName || option.code || option.areaCode || value)
+ label: String(
+ option.label || option.name || option.areaName || option.code || option.areaCode || value
+ )
}
}
@@ -175,3 +207,151 @@
syncModel(selectedAreas.value.filter((item) => Number(item.id) !== Number(id)))
}
</script>
+
+<style scoped>
+ .areas-editor {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ width: 100%;
+ }
+
+ .areas-editor__toolbar {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 8px;
+ }
+
+ .areas-editor__select {
+ width: 320px;
+ max-width: 100%;
+ }
+
+ .areas-editor__toolbar-tip {
+ color: var(--art-text-secondary);
+ font-size: 12px;
+ line-height: 1.5;
+ }
+
+ .areas-editor__panel {
+ border: 1px solid var(--art-border-color);
+ border-radius: 12px;
+ background: var(--art-bg-color);
+ overflow: hidden;
+ }
+
+ .areas-editor__header {
+ display: grid;
+ grid-template-columns: 56px minmax(0, 1fr) 112px 190px;
+ gap: 12px;
+ align-items: center;
+ padding: 10px 16px;
+ background: var(--el-fill-color-light);
+ color: var(--art-text-secondary);
+ font-size: 12px;
+ line-height: 1;
+ }
+
+ .areas-editor__list {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ padding: 12px 16px;
+ }
+
+ .areas-editor__row {
+ display: grid;
+ grid-template-columns: 56px minmax(0, 1fr) 112px 190px;
+ gap: 12px;
+ align-items: center;
+ border: 1px solid var(--art-border-color);
+ border-radius: 10px;
+ padding: 10px 12px;
+ background: var(--el-bg-color-page);
+ }
+
+ .areas-editor__index {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--art-text-secondary);
+ font-size: 13px;
+ }
+
+ .areas-editor__name {
+ min-width: 0;
+ }
+
+ .areas-editor__name-text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: var(--art-text-primary);
+ font-weight: 500;
+ line-height: 1.4;
+ }
+
+ .areas-editor__meta {
+ margin-top: 2px;
+ color: var(--art-text-secondary);
+ font-size: 12px;
+ line-height: 1.4;
+ }
+
+ .areas-editor__sort {
+ display: flex;
+ justify-content: flex-start;
+ }
+
+ :deep(.areas-editor__sort-input) {
+ width: 100px;
+ }
+
+ .areas-editor__actions {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 4px;
+ }
+
+ .areas-editor__empty {
+ display: flex;
+ min-height: 136px;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ padding: 20px 16px;
+ text-align: center;
+ }
+
+ .areas-editor__empty-title {
+ color: var(--art-text-primary);
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 1.4;
+ }
+
+ .areas-editor__empty-tip {
+ max-width: 420px;
+ color: var(--art-text-secondary);
+ font-size: 12px;
+ line-height: 1.6;
+ }
+
+ @media (max-width: 900px) {
+ .areas-editor__header {
+ display: none;
+ }
+
+ .areas-editor__row {
+ grid-template-columns: 48px minmax(0, 1fr);
+ }
+
+ .areas-editor__sort,
+ .areas-editor__actions {
+ grid-column: 2;
+ }
+ }
+</style>
--
Gitblit v1.9.1