jianghu-ui 1.0.1

package/src/components/JhConfirmDialog/JhConfirmDialog.vue

@@ -0,0 +1,181 @@
+<template>
+  <v-dialog
+    v-model="isVisible"
+    :max-width="maxWidth"
+    :persistent="persistent"
+    @click:outside="handleClickOutside"
+  >
+    <v-card>
+      <v-card-title v-if="title || $slots.title">
+        <slot name="title">{{ title }}</slot>
+      </v-card-title>
+
+      <v-card-text v-if="content || $slots.default" :class="contentClass">
+        <slot>
+          <div v-html="content"></div>
+        </slot>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn
+          v-if="showCancelButton"
+          :color="cancelButtonColor"
+          :text="cancelButtonText !== ''"
+          :disabled="loading"
+          @click="handleCancel"
+        >
+          {{ cancelButtonText || '取消' }}
+        </v-btn>
+        <v-btn
+          :color="confirmButtonColor"
+          :text="confirmButtonText !== ''"
+          :loading="loading"
+          @click="handleConfirm"
+        >
+          {{ confirmButtonText || '确定' }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  name: 'JhConfirmDialog',
+  props: {
+    // 是否显示
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    // 标题
+    title: {
+      type: String,
+      default: '提示',
+    },
+    // 内容 (支持 HTML)
+    content: {
+      type: String,
+      default: '',
+    },
+    // 内容样式类
+    contentClass: {
+      type: String,
+      default: 'pa-6 text-pre-line',
+    },
+    // 最大宽度
+    maxWidth: {
+      type: [String, Number],
+      default: 420,
+    },
+    // 是否显示取消按钮
+    showCancelButton: {
+      type: Boolean,
+      default: true,
+    },
+    // 确认按钮文本
+    confirmButtonText: {
+      type: String,
+      default: '确定',
+    },
+    // 取消按钮文本
+    cancelButtonText: {
+      type: String,
+      default: '取消',
+    },
+    // 确认按钮颜色
+    confirmButtonColor: {
+      type: String,
+      default: 'primary',
+    },
+    // 取消按钮颜色
+    cancelButtonColor: {
+      type: String,
+      default: 'default',
+    },
+    // 是否持久化(点击外部不关闭)
+    persistent: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否在确认时显示加载状态
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    // 确认前的钩子函数,返回 false 可阻止关闭
+    beforeConfirm: {
+      type: Function,
+      default: null,
+    },
+    // 取消前的钩子函数,返回 false 可阻止关闭
+    beforeCancel: {
+      type: Function,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      isVisible: false,
+    };
+  },
+  watch: {
+    value(newVal) {
+      this.isVisible = newVal;
+    },
+    isVisible(newVal) {
+      if (newVal !== this.value) {
+        this.$emit('input', newVal);
+      }
+    },
+  },
+  mounted() {
+    this.isVisible = this.value;
+  },
+  methods: {
+    async handleConfirm() {
+      if (this.beforeConfirm) {
+        const result = await this.beforeConfirm();
+        if (result === false) {
+          return;
+        }
+      }
+
+      this.$emit('confirm');
+      if (!this.loading) {
+        this.close();
+      }
+    },
+    async handleCancel() {
+      if (this.beforeCancel) {
+        const result = await this.beforeCancel();
+        if (result === false) {
+          return;
+        }
+      }
+
+      this.$emit('cancel');
+      this.close();
+    },
+    handleClickOutside() {
+      if (!this.persistent) {
+        this.$emit('click-outside');
+        this.$emit('cancel');
+      }
+    },
+    close() {
+      this.isVisible = false;
+    },
+    open() {
+      this.isVisible = true;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.text-pre-line {
+  white-space: pre-line;
+}
+</style>

package/src/components/JhDateRangePicker/JhDateRangePicker.md

@@ -0,0 +1,56 @@
+# JhDateRangePicker - 日期范围选择器
+
+JhDateRangePicker 集成快捷日期面板与 `v-date-picker`，可通过一个输入框完成常见时间段选择，适用于报表、统计筛选等场景。
+
+## 功能特性
+
+- 📆 **快捷选择**：内置最近 7/30/90 天、本月、上月、最近一年等常用区间
+- 🧭 **所见即所得**：左侧快捷列表 + 右侧日历联动，选择即高亮
+- 🧹 **一键清除**：输入框支持 `clearable`，可快速清空区间
+- 🧱 **受控组件**：通过 `v-model` 保持外部状态同步，支持 `input/change` 事件
+- 🎨 **风格统一**：继承 Vuetify 文本框交互，可配置 `filled/dense/outlined` 等外观
+
+## 基础用法
+
+```vue
+<template>
+  <jh-date-range-picker
+    v-model="dateRange"
+    prefix="时间："
+    :filled="false"
+    outlined
+    @change="reload"
+  />
+</template>
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | v-model 绑定的日期数组，长度为 2 | string[] | [] |
+| prefix | 输入框前缀文本 | string | `''` |
+| filled | 是否使用 filled 风格 | boolean | true |
+| dense | 是否紧凑 | boolean | true |
+| outlined | 是否使用 outlined 风格 | boolean | false |
+| hideDetails | 是否隐藏 `v-text-field` 底部提示 | boolean | true |
+| clearable | 是否展示清空图标 | boolean | true |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| input | `v-model` 值变化 | (value: string[]) |
+| change | 用户确认或清空时触发 | (value: string[]) |
+
+### Slots
+
+当前组件不提供插槽。
+
+## 使用建议
+
+- 如果需要自定义默认区间，可在父组件中传入初始 `value` 或监听 `menu` 打开后赋值
+- 组件默认返回 `YYYY-MM-DD` 字符串，如需传时间戳可在外层自行转换
+- 结合 `JhQueryFilter` 等查询组件可以统一触发搜索逻辑

package/src/components/JhDateRangePicker/JhDateRangePicker.stories.js

@@ -0,0 +1,320 @@
+import JhDateRangePicker from './JhDateRangePicker.vue';
+
+export default {
+  title: '基础组件/JhDateRangePicker - 日期范围',
+  component: JhDateRangePicker,
+  tags: ['autodocs'],
+  argTypes: {
+    prefix: {
+      control: 'text',
+      description: '输入框前缀文本',
+    },
+    filled: {
+      control: 'boolean',
+      description: '使用填充样式',
+    },
+    dense: {
+      control: 'boolean',
+      description: '使用紧凑模式',
+    },
+    outlined: {
+      control: 'boolean',
+      description: '使用轮廓样式',
+    },
+    hideDetails: {
+      control: 'boolean',
+      description: '隐藏详情信息',
+    },
+    clearable: {
+      control: 'boolean',
+      description: '是否可清除',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+
+一个功能丰富的日期范围选择器组件，支持快捷日期选择和自定义日期范围。
+
+## 功能特性
+
+- 日期范围选择
+- 快捷日期选择：
+  - 最近7天、30天、90天、365天
+  - 本月、上月
+- 支持清除功能
+- 支持多种样式：filled、outlined、dense
+- 自动日期排序
+- 确认/取消操作
+
+## 使用方法
+
+\`\`\`vue
+<jh-date-range-picker
+  v-model="dateRange"
+  prefix="选择日期："
+  @change="handleDateChange"
+/>
+\`\`\`
+
+## 事件
+
+- \`input\`: v-model 绑定事件，参数为日期数组 [startDate, endDate]
+- \`change\`: 日期变化事件，参数为日期数组 [startDate, endDate]
+
+## 日期格式
+
+日期格式为 YYYY-MM-DD，例如：['2024-01-01', '2024-01-31']
+        `,
+      },
+    },
+  },
+};
+
+// 获取今天日期
+const getToday = () => {
+  const date = new Date();
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
+
+// 获取N天前的日期
+const getDaysAgo = (days) => {
+  const date = new Date();
+  date.setDate(date.getDate() - days);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
+
+// 基础示例
+export const 基础示例 = {
+  args: {
+    value: [getDaysAgo(7), getToday()],
+    prefix: '',
+    filled: true,
+    dense: true,
+    outlined: false,
+    hideDetails: true,
+    clearable: true,
+  },
+  render: (args) => ({
+    components: { JhDateRangePicker },
+    data() {
+      return {
+        dateRange: args.value || [],
+      };
+    },
+    template: `
+      <div>
+        <jh-date-range-picker
+          v-model="dateRange"
+          :prefix="'${args.prefix}'"
+          :filled="${args.filled}"
+          :dense="${args.dense}"
+          :outlined="${args.outlined}"
+          :hide-details="${args.hideDetails}"
+          :clearable="${args.clearable}"
+          @change="handleChange"
+        />
+        <v-card class="mt-4" outlined>
+          <v-card-text>
+            <h4>选中的日期范围：</h4>
+            <p v-if="dateRange && dateRange.length === 2">
+              {{ dateRange[0] }} ~ {{ dateRange[1] }}
+            </p>
+            <p v-else class="grey--text">未选择日期</p>
+          </v-card-text>
+        </v-card>
+      </div>
+    `,
+    methods: {
+      handleChange(value) {
+        console.log('Date range changed:', value);
+        this.dateRange = value;
+      },
+    },
+  }),
+};
+
+// 带前缀
+export const 带前缀 = {
+  args: {
+    ...基础示例.args,
+    prefix: '日期范围：',
+  },
+  render: 基础示例.render,
+};
+
+// 轮廓样式
+export const 轮廓样式 = {
+  args: {
+    ...基础示例.args,
+    filled: false,
+    outlined: true,
+  },
+  render: 基础示例.render,
+};
+
+// 正常尺寸
+export const 正常尺寸 = {
+  args: {
+    ...基础示例.args,
+    dense: false,
+  },
+  render: 基础示例.render,
+};
+
+// 不可清除
+export const 不可清除 = {
+  args: {
+    ...基础示例.args,
+    clearable: false,
+  },
+  render: 基础示例.render,
+};
+
+// 初始为空
+export const 初始为空 = {
+  args: {
+    value: [],
+    prefix: '选择日期：',
+    filled: true,
+    dense: true,
+    outlined: false,
+    hideDetails: true,
+    clearable: true,
+  },
+  render: 基础示例.render,
+};
+
+// 表单中使用
+export const 表单中使用 = {
+  args: 基础示例.args,
+  render: (args) => ({
+    components: { JhDateRangePicker },
+    data() {
+      return {
+        formData: {
+          dateRange: [getDaysAgo(30), getToday()],
+          keyword: '',
+          status: '',
+        },
+      };
+    },
+    template: `
+      <v-card max-width="500">
+        <v-card-title>数据查询</v-card-title>
+        <v-card-text>
+          <v-form>
+            <jh-date-range-picker
+              v-model="formData.dateRange"
+              prefix="查询日期："
+              filled
+              dense
+              hide-details="auto"
+              class="mb-4"
+            />
+            <v-text-field
+              v-model="formData.keyword"
+              label="关键词"
+              filled
+              dense
+              hide-details="auto"
+              class="mb-4"
+            ></v-text-field>
+            <v-select
+              v-model="formData.status"
+              :items="statusOptions"
+              label="状态"
+              filled
+              dense
+              hide-details="auto"
+            ></v-select>
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="grey" text @click="reset">重置</v-btn>
+          <v-btn color="primary" @click="search">查询</v-btn>
+        </v-card-actions>
+        <v-divider></v-divider>
+        <v-card-text>
+          <h4>查询条件：</h4>
+          <pre>{{ formData }}</pre>
+        </v-card-text>
+      </v-card>
+    `,
+    computed: {
+      statusOptions() {
+        return [
+          { text: '全部', value: '' },
+          { text: '启用', value: 'active' },
+          { text: '禁用', value: 'inactive' },
+        ];
+      },
+    },
+    methods: {
+      search() {
+        console.log('Search with:', this.formData);
+        alert('查询条件：\\n' + JSON.stringify(this.formData, null, 2));
+      },
+      reset() {
+        this.formData = {
+          dateRange: [],
+          keyword: '',
+          status: '',
+        };
+      },
+    },
+  }),
+};
+
+// 多个选择器
+export const 多个选择器 = {
+  args: 基础示例.args,
+  render: () => ({
+    components: { JhDateRangePicker },
+    data() {
+      return {
+        createDate: [getDaysAgo(7), getToday()],
+        updateDate: [getDaysAgo(3), getToday()],
+      };
+    },
+    template: `
+      <div>
+        <v-row>
+          <v-col cols="12" md="6">
+            <div class="mb-2 text-subtitle-2">创建日期</div>
+            <jh-date-range-picker
+              v-model="createDate"
+              prefix="创建："
+              filled
+              dense
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <div class="mb-2 text-subtitle-2">更新日期</div>
+            <jh-date-range-picker
+              v-model="updateDate"
+              prefix="更新："
+              filled
+              dense
+            />
+          </v-col>
+        </v-row>
+        <v-card class="mt-4" outlined>
+          <v-card-text>
+            <h4>选中的日期：</h4>
+            <p><strong>创建日期：</strong>{{ createDate[0] }} ~ {{ createDate[1] }}</p>
+            <p><strong>更新日期：</strong>{{ updateDate[0] }} ~ {{ updateDate[1] }}</p>
+          </v-card-text>
+        </v-card>
+      </div>
+    `,
+  }),
+};