feat(auth): 后台登录、角色权限与会话访问策略
管理员与客服分角色登录，权限由后端判定；前端补齐登录、人员与组织管理页面。
This commit is contained in:
WangShen007 committed
1 parent
5e0615f36d
commit
e24d3e2a65
123 files changed
+25293
No files matched your search
@@ -0,0 +1,181 @@
|
||||
<!--
|
||||
Copyright 2024-2026 ChatterMate
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* A textarea for prompt text an AI reads, rather than a label a human reads.
|
||||
* Monospace because the content is index globs and field names, and it ships
|
||||
* a worked example behind a disclosure — a placeholder vanishes on the first
|
||||
* keystroke, which is exactly when the operator still needs the shape.
|
||||
*/
|
||||
import { computed, ref } from 'vue'
|
||||
import { MAX_GUIDANCE_CHARS } from '@/utils/mcp'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// Nullable: the API returns null for a connector nobody has documented,
|
||||
// and callers bind that straight through.
|
||||
modelValue: string | null | undefined
|
||||
label: string
|
||||
hint: string
|
||||
placeholder?: string
|
||||
example?: string
|
||||
rows?: number
|
||||
maxlength?: number
|
||||
}>(),
|
||||
{ placeholder: '', example: '', rows: 6, maxlength: MAX_GUIDANCE_CHARS },
|
||||
)
|
||||
|
||||
const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>()
|
||||
|
||||
const showExample = ref(false)
|
||||
const text = computed(() => props.modelValue ?? '')
|
||||
const isNearLimit = computed(() => text.value.length > props.maxlength * 0.9)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="guidance">
|
||||
<span class="guidance-label">{{ label }}</span>
|
||||
<p class="guidance-hint">{{ hint }}</p>
|
||||
<textarea
|
||||
class="guidance-input"
|
||||
:value="text"
|
||||
:aria-label="label"
|
||||
:rows="rows"
|
||||
:maxlength="maxlength"
|
||||
:placeholder="placeholder"
|
||||
@input="emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
|
||||
></textarea>
|
||||
<div class="guidance-foot">
|
||||
<button v-if="example" type="button" class="example-toggle" @click="showExample = !showExample">
|
||||
<font-awesome-icon :icon="['fas', showExample ? 'chevron-up' : 'chevron-down']" />
|
||||
{{ showExample ? '隐藏示例' : '查看示例' }}
|
||||
</button>
|
||||
<span v-else></span>
|
||||
<span class="guidance-count mono" :class="{ near: isNearLimit }">
|
||||
{{ text.length }} / {{ maxlength }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="example && showExample" class="guidance-example">
|
||||
<pre class="example-text mono">{{ example }}</pre>
|
||||
<!-- Offered only while the field is empty, so it can never overwrite
|
||||
something the operator actually wrote. -->
|
||||
<button
|
||||
v-if="!text.length"
|
||||
type="button"
|
||||
class="example-use"
|
||||
@click="emit('update:modelValue', example)"
|
||||
>
|
||||
用作起点
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.guidance {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
.guidance-label {
|
||||
font-size: 11px;
|
||||
color: var(--faint);
|
||||
}
|
||||
.guidance-hint {
|
||||
font-size: 11.5px;
|
||||
color: var(--muted);
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
.guidance-input {
|
||||
padding: 9px 11px;
|
||||
min-height: 130px;
|
||||
background: var(--bg2);
|
||||
border: 1px solid var(--o10);
|
||||
border-radius: 9px;
|
||||
color: var(--text);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11.5px;
|
||||
line-height: 1.55;
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
}
|
||||
.guidance-input:focus {
|
||||
border-color: var(--accent-ink);
|
||||
}
|
||||
.guidance-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
.example-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--muted);
|
||||
font-size: 11.5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.example-toggle:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
.guidance-count {
|
||||
font-size: 10.5px;
|
||||
color: var(--muted2);
|
||||
}
|
||||
.guidance-count.near {
|
||||
color: var(--c-warn);
|
||||
}
|
||||
.guidance-example {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 11px 13px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--o07);
|
||||
border-radius: 9px;
|
||||
}
|
||||
.example-text {
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
color: var(--text3);
|
||||
white-space: pre-wrap;
|
||||
overflow-x: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
.example-use {
|
||||
padding: 5px 11px;
|
||||
background: var(--o05);
|
||||
border: 1px solid var(--o10);
|
||||
border-radius: 8px;
|
||||
color: var(--muted);
|
||||
font-size: 11.5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.example-use:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
.mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user