@appthen/cli 1.2.10 → 1.2.12

package/tests/test-app/src/pages/SystemSettings.tsx

@@ -0,0 +1,422 @@
+/**
+ * 系统设置
+ * 系统参数配置和管理
+ *
+ * @type Page
+ * @route /settings
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {
+  systemId?: number;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  settings?: {
+    /* @example 1 */id?: number,
+    /* @example system.name */key?: string,
+    /* @example 我的系统 */value?: string,
+    /* @example 系统名称 */description?: string,
+    /* @example 基础设置 */category?: string,
+    /* @example string */type?: string,
+    /* @example 1 */level?: number,
+  }[];
+  loading?: boolean;
+  searchKeyword?: string;
+  selectedCategory?: string;
+  showEditModal?: boolean;
+  formData?: {
+    key?: string,
+    value?: string,
+    description?: string,
+  };
+  selectedSetting?: any;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    settings: [
+      {
+        id: 1,
+        key: 'system.name',
+        value: '我的系统',
+        description: '系统名称',
+        category: '基础设置',
+        type: 'string',
+        level: 1,
+      },
+      {
+        id: 2,
+        key: 'system.timezone',
+        value: 'Asia/Shanghai',
+        description: '系统时区',
+        category: '基础设置',
+        type: 'select',
+        level: 1,
+      },
+      {
+        id: 3,
+        key: 'system.language',
+        value: 'zh-CN',
+        description: '系统语言',
+        category: '基础设置',
+        type: 'select',
+        level: 1,
+      },
+      {
+        id: 4,
+        key: 'security.session.timeout',
+        value: 3600,
+        description: '会话超时时间（秒）',
+        category: '安全设置',
+        type: 'number',
+        level: 2,
+      },
+      {
+        id: 5,
+        key: 'security.login.attempts',
+        value: 5,
+        description: '最大登录尝试次数',
+        category: '安全设置',
+        type: 'number',
+        level: 2,
+      },
+      {
+        id: 6,
+        key: 'security.ip.whitelist',
+        value: '',
+        description: 'IP 白名单（逗号分隔）',
+        category: '安全设置',
+        type: 'string',
+        level: 2,
+      },
+      {
+        id: 7,
+        key: 'notification.email.enabled',
+        value: true,
+        description: '启用邮件通知',
+        category: '通知设置',
+        type: 'boolean',
+        level: 3,
+      },
+      {
+        id: 8,
+        key: 'notification.sms.enabled',
+        value: false,
+        description: '启用短信通知',
+        category: '通知设置',
+        type: 'boolean',
+        level: 3,
+      },
+      {
+        id: 9,
+        key: 'log.level',
+        value: 'info',
+        description: '日志级别',
+        category: '日志设置',
+        type: 'select',
+        level: 4,
+      },
+      {
+        id: 10,
+        key: 'log.retention.days',
+        value: 30,
+        description: '日志保留天数',
+        category: '日志设置',
+        type: 'number',
+        level: 4,
+      },
+    ],
+    loading: false,
+    searchKeyword: '',
+    selectedCategory: 'all',
+    showEditModal: false,
+    formData: { key: '', value: '', description: '' },
+    selectedSetting: null,
+  };
+
+  handleSearch(keyword) {
+    this.setState({
+      searchKeyword: keyword,
+    });
+  }
+
+  getSettingByKey(key) {
+    return this.state.settings.find(setting => setting.key === key);
+  }
+
+  getCategorySettings(category) {
+    if (category === 'all') {
+      return this.state.settings;
+    }
+    return this.state.settings.filter(setting => setting.category === category);
+  }
+
+  renderValue(setting) {
+    const value = setting.value;
+    const type = setting.type;
+    if (type === 'boolean') {
+      return <Switch checked={value} />;
+    } else if (type === 'select') {
+      return <Text>{value}</Text>;
+    } else {
+      return <Text>{String(value)}</Text>;
+    }
+  }
+
+  handleEdit(setting) {
+    this.setState({
+      selectedSetting: setting,
+      formData: {
+        ...setting,
+      },
+      showEditModal: true,
+    });
+  }
+
+  handleDelete(setting) {
+    this.setState({
+      settings: this.state.settings.filter(s => s.id !== setting.id),
+    });
+  }
+
+  handleSave(key, value) {
+    console.log('保存设置:', key, value);
+    this.setState({
+      settings: this.state.settings.map(s => {
+        if (s.key === key) {
+          return {
+            ...s,
+            value,
+          };
+        }
+        return s;
+      }),
+      showEditModal: false,
+    });
+  }
+
+  exportSettings(format) {
+    console.log('导出设置:', format, this.state.settings);
+  }
+
+  render() {
+    const settings = this.state.settings;
+    const loading = this.state.loading;
+    const searchKeyword = this.state.searchKeyword;
+    const selectedCategory = this.state.selectedCategory;
+    const showEditModal = this.state.showEditModal;
+    const formData = this.state.formData;
+    const selectedSetting = this.state.selectedSetting;
+    const categories = ['all', '基础设置', '安全设置', '通知设置', '日志设置'];
+    const filteredSettings = this.getCategorySettings(selectedCategory).filter(
+      setting => {
+        return (
+          setting.key.includes(searchKeyword) ||
+          setting.description.includes(searchKeyword)
+        );
+      }
+    );
+    if (loading) {
+      return <View className="p-6">加载中...</View>;
+    }
+    const categoryTab = category => (
+      <Tabs.TabPane tab={category} key={category}>
+        {category}
+      </Tabs.TabPane>
+    );
+    return (
+      <Page className="p-[24px] bg-[var(--gray-50)] min-h-screen">
+        <View className="mb-[24px]">
+          <Text className="text-2xl font-bold text-[#1f2937]">系统设置</Text>
+          <Text className="text-[#6b7280] text-sm mt-[4px]">
+            系统参数配置和管理
+          </Text>
+        </View>
+        <View className="mb-[24px]">
+          <Alert
+            message="系统设置会影响整个系统的运行"
+            description="修改设置后请谨慎操作，建议在非高峰时段进行调整"
+            type="info"
+            showIcon={true}
+          />
+        </View>
+        <View className="mb-[24px] flex items-center justify-between">
+          <View className="gap-4 flex items-center">
+            <Input
+              placeholder="搜索设置项"
+              value={searchKeyword}
+              onChange={e => this.handleSearch(e.target.value)}
+              className=""
+            />
+            <Select
+              value={selectedCategory}
+              onChange={value =>
+                this.setState({
+                  selectedCategory: value,
+                })
+              }
+              className=""
+            >
+              {categories.map((category, index) => (
+                <Select.Option key={category} value={category}>
+                  <Text>{category}</Text>
+                </Select.Option>
+              ))}
+            </Select>
+          </View>
+          <Button
+            type="primary"
+            onClick={() =>
+              this.setState({
+                showEditModal: true,
+              })
+            }
+          >
+            添加设置
+          </Button>
+        </View>
+        <Card className="mb-[24px]">
+          <Tabs
+            activeKey={selectedCategory}
+            onChange={key =>
+              this.setState({
+                selectedCategory: key,
+              })
+            }
+          >
+            {categories.map((category, index) => (
+              <Text>{categoryTab(category)}</Text>
+            ))}
+          </Tabs>
+        </Card>
+        <Card>
+          <View>设置列表</View>
+        </Card>
+        <Modal
+          animate="pop"
+          visible={showEditModal}
+          renderView={() => (
+            <View className="bg-[#ffffff] w-[600px] h-[500px] p-[24px]">
+              <Text className="text-xl font-bold mb-[16px]">添加系统设置</Text>
+              <View className="space-y-4">
+                <View>
+                  <Text className="block mb-[8px]">设置项</Text>
+                  <Input
+                    value={formData?.key}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...formData,
+                          key: e.target.value,
+                        },
+                      })
+                    }
+                    placeholder="请输入设置项键"
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">描述</Text>
+                  <Input
+                    value={formData?.description}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...formData,
+                          description: e.target.value,
+                        },
+                      })
+                    }
+                    placeholder="请输入描述"
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">值</Text>
+                  <Input
+                    value={formData?.value}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...formData,
+                          value: e.target.value,
+                        },
+                      })
+                    }
+                    placeholder="请输入值"
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">类别</Text>
+                  <Select
+                    value={formData?.category}
+                    onChange={value =>
+                      this.setState({
+                        formData: {
+                          ...formData,
+                          category: value,
+                        },
+                      })
+                    }
+                    placeholder="请选择类别"
+                    className="w-full"
+                  >
+                    <Select.Option value="基础设置">基础设置</Select.Option>
+                    <Select.Option value="安全设置">安全设置</Select.Option>
+                    <Select.Option value="通知设置">通知设置</Select.Option>
+                    <Select.Option value="日志设置">日志设置</Select.Option>
+                  </Select>
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">级别</Text>
+                  <InputNumber
+                    value={formData?.level}
+                    onChange={value =>
+                      this.setState({
+                        formData: {
+                          ...formData,
+                          level: value,
+                        },
+                      })
+                    }
+                    placeholder="请输入级别"
+                    min={1}
+                    max={5}
+                  />
+                </View>
+                <View className="gap-2 flex justify-end mt-[24px]">
+                  <Button
+                    onClick={() =>
+                      this.setState({
+                        showEditModal: false,
+                      })
+                    }
+                  >
+                    取消
+                  </Button>
+                  <Button
+                    type="primary"
+                    onClick={() =>
+                      this.handleSave(formData?.key || '', formData?.value)
+                    }
+                  >
+                    确认
+                  </Button>
+                </View>
+              </View>
+            </View>
+          )}
+          maskClosable={true}
+        />
+      </Page>
+    );
+  }
+}
+
+export default Document;