大致完成页面

pages/mall/admin/decoration/components/MenuSide.uvue

@@ -0,0 +1,60 @@
+<template>
+  <view class="menu-column">
+    <view 
+      v-for="item in categories" 
+      :key="item.key" 
+      :class="['menu-item', activeKey === item.key ? 'active' : '']"
+      @click="$emit('change', item.key)"
+    >
+      <text :class="['menu-txt', activeKey === item.key ? 'active-txt' : '']">{{ item.label }}</text>
+      <view v-if="activeKey === item.key" class="active-line"></view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+import { type Category } from '@/pages/mall/admin/decoration/components/types.uts'
+
+defineProps<{
+  categories: Category[]
+  activeKey: string
+}>()
+
+defineEmits(['change'])
+</script>
+
+<style scoped lang="scss">
+.menu-column {
+  width: 200px;
+  background-color: #fff;
+  border-right: 1px solid #f0f0f0;
+  padding: 20px 0;
+}
+
+.menu-item {
+  height: 50px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 24px;
+  position: relative;
+  cursor: pointer;
+}
+
+.menu-item.active {
+  background-color: #f0f7ff;
+}
+
+.menu-txt { font-size: 14px; color: #666; }
+.menu-txt.active-txt { color: #1890ff; font-weight: bold; }
+
+.active-line {
+  position: absolute;
+  right: 0;
+  top: 15px;
+  bottom: 15px;
+  width: 3px;
+  background-color: #1890ff;
+  border-radius: 3px 0 0 3px;
+}
+</style>