装修，底部导航

admin/src/components/color-picker/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="color-picker flex flex-1">
+        <el-color-picker v-model="color" :predefine="predefineColors" />
+        <el-input v-model="color" class="mx-[10px] flex-1" type="text" readonly />
+        <el-button type="text" @click="reset">重置</el-button>
+    </div>
+</template>
+<script lang="ts" setup>
+const props = defineProps({
+    modelValue: {
+        type: String
+    },
+    defaultColor: {
+        type: String
+    }
+})
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: any): void
+}>()
+
+const color = computed({
+    get() {
+        return props.modelValue
+    },
+    set(value) {
+        emit('update:modelValue', value)
+    }
+})
+const predefineColors = ['#409EFF', '#28C76F', '#EA5455', '#FF9F43', '#01CFE8', '#4A5DFF']
+const reset = () => {
+    color.value = props.defaultColor
+}
+</script>

admin/src/components/footer-btns/index.vue

@@ -1,21 +1,24 @@
 <template>
     <div class="footer-btns">
-        <div class="footer-btns__content">
+        <div class="footer-btns__content" :style="fixed ? 'position: fixed' : ''">
             <slot></slot>
         </div>
     </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({})
+<script lang="ts" setup>
+defineProps({
+    fixed: {
+        type: Boolean,
+        default: true
+    }
+})
 </script>
 
 <style scoped lang="scss">
 .footer-btns {
     height: 60px;
     &__content {
-        position: fixed;
         bottom: 0;
         height: 60px;
         right: 0;

admin/src/components/link/picker.vue

@@ -1,26 +1,17 @@
 <template>
-    <div class="link-picker">
-        <popup width="700px" title="链接选择" @confirm="handleConfirm">
-            <template v-slot:trigger>
-                <div class="cursor-pointer">
-                    <slot>
-                        <el-input
-                            :model-value="modelValue?.name ?? modelValue?.path"
-                            placeholder="请选择链接"
-                            readonly
-                        >
-                            <template #suffix>
-                                <icon v-if="!modelValue?.path" name="el-icon-ArrowRight" />
-                                <icon
-                                    v-else
-                                    name="el-icon-Close"
-                                    @click.stop="emit('update:modelValue', {})"
-                                />
-                            </template>
-                        </el-input>
-                    </slot>
-                </div>
+    <div class="link-picker flex-1" @click="popupRef?.open()">
+        <el-input
+            class="cursor-pointer"
+            :model-value="modelValue?.name ?? modelValue?.path"
+            placeholder="请选择链接"
+            readonly
+        >
+            <template #suffix>
+                <icon v-if="!modelValue?.path" name="el-icon-ArrowRight" />
+                <icon v-else name="el-icon-Close" @click.stop="emit('update:modelValue', {})" />
             </template>
+        </el-input>
+        <popup ref="popupRef" width="700px" title="链接选择" @confirm="handleConfirm">
             <link-content v-model="activeLink" />
         </popup>
     </div>
@@ -29,6 +20,7 @@
 <script lang="ts" setup>
 import type { Link } from '.'
 import LinkContent from './index.vue'
+import Popup from '@/components/popup/index.vue'
 const props = defineProps({
     modelValue: {
         type: Object
@@ -37,6 +29,8 @@ const props = defineProps({
 const emit = defineEmits<{
     (event: 'update:modelValue', value: any): void
 }>()
+
+const popupRef = shallowRef<InstanceType<typeof Popup>>()
 const activeLink = ref<Link>()
 const handleConfirm = () => {
     emit('update:modelValue', activeLink.value)