Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

主页 SoC下拉菜单 加入厂商名称 #12

Closed
wants to merge 2 commits into from
Closed

主页 SoC下拉菜单 加入厂商名称 #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
757bbb6
替换 软件包场景 为 镜像特性
paithfinder Feb 17, 2025
00a8589
主页 SoC下拉菜单 加入厂商名称
paithfinder Feb 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions src/components/SystemSelect.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,8 +140,8 @@ const packageOptions = computed(() => {
new Set(
allImageSuites.map(suite =>
JSON.stringify({
value: suite.userspace,
label: suite.userspace
value: String(suite.features).split(',').join(' + '),
label: String(suite.features).split(',').join(' + ')
})
)
)
Expand Down Expand Up @@ -234,6 +234,7 @@ const closeDropdowns = e => {
onMounted(() => {
loadDocs();
document.addEventListener("click", closeDropdowns);
console.log(packageOptions.value,'我是选项')
});

onUnmounted(() => {
Expand Down Expand Up @@ -312,8 +313,8 @@ const getFileName = url => {
</div>
</div>

<div class="select-row">
<div class="select-label">软件包场景:</div>
<div class="select-row" v-show="packageOptions[0].value!==''">
<div class="select-label">镜像特性:</div>
<div class="select-box">
<div class="select-wrapper">
<div
Expand Down Expand Up @@ -403,7 +404,7 @@ const getFileName = url => {
<div class="value">{{ selectedKernel }}</div>
</div>
<div class="package">
<div class="label">软件包场景：</div>
<div class="label">镜像特性：</div>
<div class="value">{{ selectedPackage }}</div>
</div>
</div>
Expand Down Expand Up @@ -461,6 +462,7 @@ $border-color: #f1faff;
padding: 32px 0 32px 32px;

.sys-wrapper {
max-height: 348px;
overflow-y: auto;
padding-right: 16px;
box-sizing: border-box;
Expand Down Expand Up @@ -1074,4 +1076,4 @@ select:focus {
list-style-type: disc;
}
}
</style>
</style>
2 changes: 1 addition & 1 deletion src/views/board/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -305,7 +305,7 @@ watch(
<div id="content">{{ boardDetail?.vendor?.name }}</div>
</div>
<div id="board-block">
<div id="title">Soc型号称：</div>
<div id="title">Soc型号：</div>
<div id="content">{{ boardDetail?.soc?.name }}</div>
</div>
<div id="board-block">
Expand Down
126 changes: 81 additions & 45 deletions src/views/home/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,20 +20,20 @@ const isSticky = ref(false);
const showSearchInput = ref(false);
const showBackToTop = ref(false);
const productList = ref([]);
const randomPlaceholder = ref('');
const randomPlaceholder = ref("");
const placeholderTimer = ref(null);
const lastPlaceholder = ref('');
const lastPlaceholder = ref("");

const nameMapping = {
soc: "SoC型号",
isa: "指令集特性",
kernel: "内核版本",
userspace: "软件包场景",
features: "镜像特性",
status: "支持状态"
};

const dropMenu = computed(() => {
const keys = ["soc", "isa", "kernel", "userspace", "status"];
const keys = ["soc", "isa", "kernel", "features", "status"];
return keys.map((key, index) => {
const items = [
...new Set(
Expand Down Expand Up @@ -63,7 +63,12 @@ const searchSuggestions = computed(() => {
.filter(
item =>
item.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
item.vendor.toLowerCase().includes(searchKeyword.value.toLowerCase())
item.vendor.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
(item.soc &&
item.soc.name &&
item.soc.name
.toLowerCase()
.includes(searchKeyword.value.toLowerCase()))
)
.slice(0, 5);
});
Expand Down Expand Up @@ -104,7 +109,10 @@ const filteredProductList = computed(() => {
filtered = filtered.filter(
product =>
product.name.toLowerCase().includes(keyword) ||
product.vendor.toLowerCase().includes(keyword)
product.vendor.toLowerCase().includes(keyword) ||
(product.soc &&
product.soc.name &&
product.soc.name.toLowerCase().includes(keyword))
);
}

Expand All @@ -113,6 +121,12 @@ const filteredProductList = computed(() => {

const getMenuTitle = computed(() => menuId => {
if (selectedOptions.value[menuId]) {
if (
typeof selectedOptions.value[menuId] === "object" &&
selectedOptions.value[menuId].vendor
) {
return `${selectedOptions.value[menuId].vendor} ${selectedOptions.value[menuId].name}`;
}
return selectedOptions.value[menuId];
}
return dropMenu.value.find(item => item.id === menuId)?.name;
Expand All @@ -122,23 +136,26 @@ const getTruncatedTitle = computed(() => menuId => {
const title = getMenuTitle.value(menuId);
const span = document.createElement("span");
span.style.font = "500 24px PingFang SC-Regular";
span.textContent = title;
document.body.appendChild(span);
const width = span.offsetWidth;
document.body.removeChild(span);

if (width <= 120) return title;

span.textContent = title;
const fullWidth = span.offsetWidth;
if (fullWidth <= 120) {
document.body.removeChild(span);
return title;
}
span.textContent = "...";

let truncatedText = title;
while (truncatedText.length > 0) {
span.textContent = truncatedText + "...";
if (span.offsetWidth <= 120) break;
if (span.offsetWidth <= 120) {
document.body.removeChild(span);
return truncatedText + "...";
}
truncatedText = truncatedText.slice(0, -1);
}

return truncatedText + "...";
document.body.removeChild(span);
return "...";
});

const handleSearchInput = e => {
Expand Down Expand Up @@ -191,7 +208,15 @@ const handleInputBlur = () => {
};

const handleSuggestionClick = item => {
searchKeyword.value = item.name;
if (
item.soc &&
item.soc.name &&
item.soc.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
) {
searchKeyword.value = item.soc.name;
} else {
searchKeyword.value = item.name;
}
showSuggestions.value = false;
};

Expand Down Expand Up @@ -238,7 +263,7 @@ const viewportWidth = ref(0);
const isdummy = ref(false);
const changeViewportWidth = () => {
viewportWidth.value = document.body.scrollWidth;
changeIsDummy(viewportWidth.value)
changeIsDummy(viewportWidth.value);
};

onUnmounted(() => {
Expand All @@ -249,13 +274,13 @@ onUnmounted(() => {
});
watch(viewportWidth, newValue => {
console.log(newValue, "viewportWidth变化了");
changeIsDummy(newValue)
changeIsDummy(newValue);
});
watch(filteredProductList, newValue => {
console.log(newValue.length, "我是筛选数目");
changeIsDummy(viewportWidth.value);
});
watch(filteredProductList,newValue=>{
console.log(newValue.length,'我是筛选数目')
changeIsDummy(viewportWidth.value)
})
const changeIsDummy=(value)=>{
const changeIsDummy = value => {
if (Math.floor((value + 16) / 256) > filteredProductList.value.length) {
isdummy.value = false;
let elements = document.querySelectorAll(".dummy-wrapper");
Expand All @@ -271,29 +296,31 @@ const changeIsDummy=(value)=>{
element.style.display = "block";
});
}
}
const fetchProductList=async()=>{
};
const fetchProductList = async () => {
try {
const response = await getProductList();
productList.value = response.data;
await nextTick();
} catch (error) {
console.error("获取产品列表失败:", error);
}

}
};

const getRandomProduct = () => {
if (!productList.value || productList.value.length === 0) {
return '';
return "";
}

let newPlaceholder;
do {
const randomIndex = Math.floor(Math.random() * productList.value.length);
newPlaceholder = productList.value[randomIndex].name;
} while (newPlaceholder === lastPlaceholder.value && productList.value.length > 1);

} while (
newPlaceholder === lastPlaceholder.value &&
productList.value.length > 1
);

lastPlaceholder.value = newPlaceholder;
return newPlaceholder;
};
Expand Down Expand Up @@ -389,7 +416,7 @@ onMounted(async () => {
src="@/assets/icons/home/Group 2.png"
alt=""
/>
<button v-else class="search-text" type="button" >搜 索</button>
<button v-else class="search-text" type="button">搜 索</button>
</div>

<div
Expand All @@ -403,7 +430,17 @@ onMounted(async () => {
@click="handleSuggestionClick(item)"
>
<div class="suggestion-content">
<div class="suggestion-name">{{ item.name }}</div>
<div class="suggestion-name">
{{
item.soc &&
item.soc.name &&
item.soc.name
.toLowerCase()
.includes(searchKeyword.toLowerCase())
? item.soc.name
: item.name
}}
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -442,7 +479,9 @@ onMounted(async () => {
@click="handleOptionSelect(item.id, option, $event)"
>
<span class="selector"></span>
<span id="option-name">{{ option }}</span>
<span id="option-name">{{
option.vendor ? option.vendor + " " + option.name : option
}}</span>
</li>
</div>
</ul>
Expand Down Expand Up @@ -765,7 +804,6 @@ $border-color: #f1faff;
.menu-text {
max-width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
Expand Down Expand Up @@ -799,8 +837,7 @@ $border-color: #f1faff;
.options {
position: absolute;
top: 100%;
width: 100%;
width: 240px;
min-width: 16em;
height: auto;
padding: 16px 0;
box-sizing: border-box;
Expand All @@ -819,7 +856,13 @@ $border-color: #f1faff;
font-size: 20px;
color: #666666;
transition: all 0.3s ease;
word-break: break-all;
white-space: nowrap;

#option-name {
flex: 0 1 auto;
white-space: nowrap;
overflow: visible;
}

.selector {
flex-shrink: 0;
Expand All @@ -842,13 +885,6 @@ $border-color: #f1faff;
}
}

#option-name {
flex: 1;
word-wrap: break-word;
min-width: 0;
line-height: 1.4;
}

&:hover {
background: rgba(1, 47, 166, 0.1);
color: $primary-blue;
Expand Down