web/frpc: redesign frpc dashboard with sidebar nav, proxy/visitor list and detail views (#5237)

web/frpc/src/components/ConfigSection.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="config-section-card">
+    <!-- Collapsible: header is a separate clickable area -->
+    <template v-if="collapsible">
+      <div
+        v-if="title"
+        class="section-header clickable"
+        @click="handleToggle"
+      >
+        <h3 class="section-title">{{ title }}</h3>
+        <div class="section-header-right">
+          <span v-if="readonly && !hasValue" class="not-configured-badge">
+            Not configured
+          </span>
+          <el-icon v-if="canToggle" class="collapse-arrow" :class="{ expanded }">
+            <ArrowDown />
+          </el-icon>
+        </div>
+      </div>
+      <div class="collapse-wrapper" :class="{ expanded }">
+        <div class="collapse-inner">
+          <div class="section-body">
+            <slot />
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- Non-collapsible: title and content in one area -->
+    <template v-else>
+      <div class="section-body">
+        <h3 v-if="title" class="section-title section-title-inline">{{ title }}</h3>
+        <slot />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { ArrowDown } from '@element-plus/icons-vue'
+
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    collapsible?: boolean
+    readonly?: boolean
+    hasValue?: boolean
+  }>(),
+  {
+    title: '',
+    collapsible: false,
+    readonly: false,
+    hasValue: true,
+  },
+)
+
+const computeInitial = () => {
+  if (!props.collapsible) return true
+  return props.hasValue
+}
+
+const expanded = ref(computeInitial())
+
+// Only auto-expand when hasValue goes from false to true (async data loaded)
+// Never auto-collapse — don't override user interaction
+watch(
+  () => props.hasValue,
+  (newVal, oldVal) => {
+    if (newVal && !oldVal && props.collapsible) {
+      expanded.value = true
+    }
+  },
+)
+
+const canToggle = computed(() => {
+  if (!props.collapsible) return false
+  if (props.readonly && !props.hasValue) return false
+  return true
+})
+
+const handleToggle = () => {
+  if (canToggle.value) {
+    expanded.value = !expanded.value
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.config-section-card {
+  background: var(--el-bg-color);
+  border: 1px solid var(--color-border-lighter);
+  border-radius: 12px;
+  margin-bottom: 16px;
+  overflow: hidden;
+}
+
+/* Collapsible header */
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+}
+
+.section-header.clickable {
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.section-header.clickable:hover {
+  background: var(--color-bg-hover);
+}
+
+.section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+/* Inline title for non-collapsible sections */
+.section-title-inline {
+  margin-bottom: 16px;
+}
+
+.section-header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.not-configured-badge {
+  font-size: 11px;
+  color: var(--color-text-light);
+  background: var(--color-bg-muted);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.collapse-arrow {
+  transition: transform 0.3s;
+  color: var(--color-text-muted);
+}
+
+.collapse-arrow.expanded {
+  transform: rotate(-180deg);
+}
+
+/* Grid-based collapse animation */
+.collapse-wrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.25s ease;
+}
+
+.collapse-wrapper.expanded {
+  grid-template-rows: 1fr;
+}
+
+.collapse-inner {
+  overflow: hidden;
+}
+
+.section-body {
+  padding: 20px 20px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.section-body :deep(.el-form-item) {
+  margin-bottom: 0;
+}
+
+.section-body :deep(.config-field-readonly) {
+  margin-bottom: 0;
+}
+
+@include mobile {
+  .section-body {
+    padding: 16px;
+  }
+}
+</style>