初始化

2026-08-25 17:59:42 +08:00
commit 4b7380dd9b
408 changed files with 327400 additions and 0 deletions
@@ -0,0 +1,87 @@
+<!-- 项目搜索输入组件，统一项目列表的搜索和清空交互。 -->
+<script setup lang="ts">
+import { Search, X } from "@/icons";
+
+withDefaults(defineProps<{ modelValue: string; placeholder?: string }>(), {
+  placeholder: "搜索项目",
+});
+const emit = defineEmits<{ "update:modelValue": [value: string] }>();
+</script>
+
+<template>
+  <div class="project-search-field">
+    <Search :size="17" />
+    <input
+      :value="modelValue"
+      type="search"
+      :placeholder="placeholder"
+      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    />
+    <button
+      v-if="modelValue"
+      type="button"
+      title="清空搜索"
+      @click="emit('update:modelValue', '')"
+    >
+      <X :size="16" />
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.project-search-field {
+  width: min(380px, 100%);
+  height: var(--control-height-lg);
+  padding: 0 var(--space-xs) 0 var(--space-md);
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  color: var(--web-text-tertiary);
+  background: var(--web-surface);
+  border: 1px solid var(--web-line-strong);
+  border-radius: var(--radius-sm);
+  transition:
+    color 0.18s,
+    border-color 0.18s,
+    box-shadow 0.18s;
+}
+.project-search-field:focus-within {
+  color: var(--web-accent-dark);
+  border-color: var(--web-line-accent);
+  box-shadow: 0 0 0 2px var(--web-search-outline);
+}
+.project-search-field input {
+  min-width: 0;
+  width: 100%;
+  color: var(--web-text);
+  background: transparent;
+  border: 0;
+  font-size: 14px;
+  outline: 0;
+  appearance: none;
+}
+.project-search-field input::-webkit-search-cancel-button {
+  display: none;
+  appearance: none;
+}
+.project-search-field button {
+  width: var(--control-height-sm);
+  height: var(--control-height-sm);
+  padding: 0;
+  display: grid;
+  place-items: center;
+  flex: 0 0 var(--control-height-sm);
+  color: var(--web-control-muted);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition:
+    color 0.18s,
+    background-color 0.18s;
+}
+.project-search-field button:hover:not(:disabled) {
+  color: var(--web-accent-muted);
+  background: var(--web-hover);
+}
+</style>